root = Card([header, progressSection, modulesSection, nextLesson, ratingSection, continueBtn], "card", "column", "l")
header = CardHeader("Advanced React Patterns", "by Sarah Chen, Senior Frontend Engineer")
progressSection = Card([progressLabel, progressBar, progressDetail], "clear", "column", "xs")
progressLabel = TextContent("Overall Progress", "small-heavy")
progressBar = Progress(68, "68% complete")
progressDetail = TextContent("17 of 25 lessons completed • 12 hours invested", "small")
modulesSection = Card([modulesHeader, modulesList], "sunk", "column", "m")
modulesHeader = Heading("Course Modules", "h3")
modulesList = ListBlock([mod1, mod2, mod3, mod4, mod5], "number")
mod1 = ListItem("Module 1: React Fundamentals Refresher", "5/5 lessons • 100% complete ✓", null, "Review")
mod2 = ListItem("Module 2: Advanced Hooks & Patterns", "8/10 lessons • 80% complete", null, "Continue")
mod3 = ListItem("Module 3: State Management Deep Dive", "3/6 lessons • 50% complete", null, "Continue")
mod4 = ListItem("Module 4: Performance Optimization", "1/4 lessons • 25% complete", null, "Start")
mod5 = ListItem("Module 5: Testing Strategies", "0/5 lessons • Not started", null, "Start")
nextLesson = Callout("info", "Next Up: Lesson 9 — Custom Hooks for Data Fetching", "Part of Module 2: Advanced Hooks & Patterns • Estimated 25 min • Covers useSWR patterns, caching strategies, and error boundaries")
ratingSection = Card([ratingLabel, ratingDisplay, ratingBreakdown], "clear", "column", "xs")
ratingLabel = TextContent("Learner Rating", "small-heavy")
ratingDisplay = TextContent("4.8 ★★★★★  (1,247 ratings)", "large-heavy")
ratingBreakdown = TextContent("92% 5-star • 6% 4-star • 2% 3-star or below", "small")
continueBtn = Buttons([continueButton], "row")
continueButton = Button("Continue Learning →", null, "primary", "normal", "large")