root = Card([header, progressCard, nextLesson, modulesCard, ratingRow, actions], "card", "column", "l")
header = CardHeader("Advanced JavaScript: Patterns & Performance", "Instructor: Dr. Maya Chen · 42 lessons · 18h 30m")
progressCard = Card([progressBar], "sunk")
progressBar = Progress(68, "Overall progress: 68%")
nextLesson = Callout("info", "Up next", "Module 4 · Lesson 2: The Microtask Queue — 12 min")
modulesCard = Card([modulesHeading, module1, module2, module3, module4, module5], "sunk")
modulesHeading = Heading("Course modules", "h3")
module1 = Card([m1name, m1status], "clear", "row", "m", "center", "between")
m1name = TextContent("Module 1 · JavaScript Fundamentals", "small-heavy")
m1status = Tag("Completed", null, "sm", "success")
module2 = Card([m2name, m2status], "clear", "row", "m", "center", "between")
m2name = TextContent("Module 2 · Asynchronous Patterns", "small-heavy")
m2status = Tag("Completed", null, "sm", "success")
module3 = Card([m3name, m3status], "clear", "row", "m", "center", "between")
m3name = TextContent("Module 3 · Performance Optimization", "small-heavy")
m3status = Tag("In progress", null, "sm", "info")
module4 = Card([m4name, m4status], "clear", "row", "m", "center", "between")
m4name = TextContent("Module 4 · Event Loop Deep Dive", "small-heavy")
m4status = Tag("Not started", null, "sm", "neutral")
module5 = Card([m5name, m5status], "clear", "row", "m", "center", "between")
m5name = TextContent("Module 5 · Design Patterns in the Wild", "small-heavy")
m5status = Tag("Not started", null, "sm", "neutral")
ratingRow = Card([ratingTag, ratingText], "sunk", "row", "m", "center")
ratingTag = Tag("4.8 / 5", null, "md", "success")
ratingText = TextContent("Average learner rating · 1,240 reviews", "small")
actions = Buttons([continueBtn])
continueBtn = Button("Continue learning", null, "primary", null, "large")