root = Card([header, kpiRow, nextLessonCard, modulesSection, continueBtns])
header = CardHeader("Building Modern Web Applications with React", "Instructor: Sarah Chen · Senior Engineer at TechCorp")
kpiRow = SnippetCardBlock([progressCard, ratingCard], "grid", true)
progressCard = SnippetCardItem("progress", progressLhs, progressRhs)
progressLhs = IconText(progressIcon, "neutral", "m", "Overall Progress", "Course completion", false, "horizontal")
progressIcon = Icon("circle-progress", "charts")
progressRhs = BoldText("number", "67%", "+12% this week", "metric")
ratingCard = SnippetCardItem("rating", ratingLhs, ratingRhs)
ratingLhs = IconText(ratingIcon, "neutral", "m", "Learner Rating", "Based on 1,247 reviews", false, "horizontal")
ratingIcon = Icon("star", "shapes")
ratingRhs = BoldText("number", "4.8", "★★★★★", "text")
nextLessonCard = CompositeCardBlock([nextLessonItem], "grid", true, { type: "continue_conversation", context: "Start the next lesson: Advanced State Management with Redux Toolkit" })
nextLessonItem = CompositeCardItem("next-lesson", nextHeader, [nextBody, nextMeta], { price: nextPrice, button: nextBtn })
nextHeader = IconText(nextIcon, "success", "m", "Up Next: Lesson 4.3", "Module 4 · Advanced State Management", true, "horizontal")
nextIcon = Icon("play-circle", "media")
nextBody = Text("text", "Advanced State Management with Redux Toolkit", "45 min · Video + Interactive Lab")
nextMeta = EntityList([meta1, meta2], "small")
meta1 = { left: "Difficulty", right: "Intermediate", rightVariant: "text" }
meta2 = { left: "Prerequisites", right: "Lessons 4.1–4.2 complete", rightVariant: "text" }
nextPrice = MetricIndicatorWithStrikethrough("Free with enrollment", "Included in your subscription")
nextBtn = Button("Continue Learning", { type: "continue_conversation", context: "Start Lesson 4.3: Advanced State Management with Redux Toolkit" }, "primary")
modulesSection = SectionBlock([mod1, mod2, mod3, mod4, mod5], false)
mod1 = SectionItem("mod1", "Module 1: React Fundamentals ✓ 100%", [mod1Content])
mod1Content = EntityList([m1l1, m1l2, m1l3, m1l4], "small")
m1l1 = { left: "1.1 Introduction to React", right: "✓ Complete", rightVariant: "text" }
m1l2 = { left: "1.2 JSX & Components", right: "✓ Complete", rightVariant: "text" }
m1l3 = { left: "1.3 Props & State Basics", right: "✓ Complete", rightVariant: "text" }
m1l4 = { left: "1.4 Event Handling", right: "✓ Complete", rightVariant: "text" }
mod2 = SectionItem("mod2", "Module 2: Hooks Deep Dive ✓ 100%", [mod2Content])
mod2Content = EntityList([m2l1, m2l2, m2l3, m2l4, m2l5], "small")
m2l1 = { left: "2.1 useState & useEffect", right: "✓ Complete", rightVariant: "text" }
m2l2 = { left: "2.2 useContext & useReducer", right: "✓ Complete", rightVariant: "text" }
m2l3 = { left: "2.3 Custom Hooks", right: "✓ Complete", rightVariant: "text" }
m2l4 = { left: "2.4 Performance Hooks", right: "✓ Complete", rightVariant: "text" }
m2l5 = { left: "2.5 Testing Hooks", right: "✓ Complete", rightVariant: "text" }
mod3 = SectionItem("mod3", "Module 3: Routing & Navigation ✓ 100%", [mod3Content])
mod3Content = EntityList([m3l1, m3l2, m3l3, m3l4], "small")
m3l1 = { left: "3.1 React Router v6", right: "✓ Complete", rightVariant: "text" }
m3l2 = { left: "3.2 Nested Routes", right: "✓ Complete", rightVariant: "text" }
m3l3 = { left: "3.3 Route Guards & Auth", right: "✓ Complete", rightVariant: "text" }
m3l4 = { left: "3.4 Lazy Loading Routes", right: "✓ Complete", rightVariant: "text" }
mod4 = SectionItem("mod4", "Module 4: State Management (In Progress) 67%", [mod4Content])
mod4Content = EntityList([m4l1, m4l2, m4l3, m4l4, m4l5, m4l6], "small")
m4l1 = { left: "4.1 Context vs Redux", right: "✓ Complete", rightVariant: "text" }
m4l2 = { left: "4.2 Redux Toolkit Basics", right: "✓ Complete", rightVariant: "text" }
m4l3 = { left: "4.3 Advanced State Management", right: "▶ Next Up", rightVariant: "text" }
m4l4 = { left: "4.4 RTK Query & Caching", right: "○ Not Started", rightVariant: "text" }
m4l5 = { left: "4.5 Middleware & DevTools", right: "○ Not Started", rightVariant: "text" }
m4l6 = { left: "4.6 Migration Strategies", right: "○ Not Started", rightVariant: "text" }
mod5 = SectionItem("mod5", "Module 5: Testing & Deployment ○ 0%", [mod5Content])
mod5Content = EntityList([m5l1, m5l2, m5l3, m5l4], "small")
m5l1 = { left: "5.1 Unit Testing with Vitest", right: "○ Not Started", rightVariant: "text" }
m5l2 = { left: "5.2 Integration Testing", right: "○ Not Started", rightVariant: "text" }
m5l3 = { left: "5.3 E2E Testing with Playwright", right: "○ Not Started", rightVariant: "text" }
m5l4 = { left: "5.4 CI/CD & Deployment", right: "○ Not Started", rightVariant: "text" }
continueBtns = Buttons([continueBtn, reviewBtn], "row")
continueBtn = Button("Continue Learning", { type: "continue_conversation", context: "Resume from Lesson 4.3: Advanced State Management with Redux Toolkit" }, "primary")
reviewBtn = Button("Review Previous Lesson", { type: "continue_conversation", context: "Review Lesson 4.2: Redux Toolkit Basics" }, "secondary")