root = Card([header, filterCard, statsRow, growthCard, insightsRow, bestPostsCard, inboxRow, scheduledCard, scheduleCard], "card", "column", "l")

header = CardHeader("Creator Studio", "Analytics, publishing & inbox across Instagram, TikTok, YouTube and X")

filterCard = Card([filterTitle, filterForm], "sunk", "column", "s")
filterTitle = Heading("Narrow everything to one platform", "h3")
filterForm = Form("platform-filter", filterButtons, [platformField])
filterButtons = Buttons([applyFilterBtn])
applyFilterBtn = Button("Apply filter", null, "primary")
platformField = FormControl("Platform", platformSelect)
platformSelect = Select("platform", [platformAll, platformInsta, platformTikTok, platformYT, platformX], "All platforms")
platformAll = SelectItem("all", "All platforms")
platformInsta = SelectItem("instagram", "Instagram")
platformTikTok = SelectItem("tiktok", "TikTok")
platformYT = SelectItem("youtube", "YouTube")
platformX = SelectItem("x", "X (Twitter)")

statsRow = Card([followersCard, engagementCard, earningsCard], "clear", "row", "m")
followersCard = Card([followersValue, growthTag], "sunk", "column", "xs")
followersValue = Heading("128,413", "h3")
growthTag = Tag("+4.2% this month", null, null, "success")
engagementCard = Card([engagementValue, engagementTag], "sunk", "column", "xs")
engagementValue = Heading("6.8%", "h3")
engagementTag = Tag("Engagement rate", null, null, "info")
earningsCard = Card([earningsValue, earningsTag], "sunk", "column", "xs")
earningsValue = Heading("$4,320", "h3")
earningsTag = Tag("Earned this month", null, null, "neutral")

growthCard = Card([growthHeading, growthChart, growthCallout], "sunk")
growthHeading = Heading("Follower growth — past month", "h3")
growthChart = AreaChart(["Week 1", "Week 2", "Week 3", "Week 4"], [followerSeries], "natural", null, "Followers")
followerSeries = Series("Followers", [118200, 121900, 124800, 128413])
growthCallout = TextCallout("info", "Gained 10,200 followers in 30 days", "Daily joins peaked after the summer reel went viral.")

insightsRow = Card([audienceCard, bestHourCard], "clear", "row", "m")
audienceCard = Card([audienceHeading, audienceChart], "sunk")
audienceHeading = Heading("Audience split by platform", "h3")
audienceChart = PieChart(["Instagram", "TikTok", "YouTube", "X"], [41, 33, 18, 8], "donut")
bestHourCard = Card([bestHourHeading, bestHourChart, bestHourTag], "sunk")
bestHourHeading = Heading("Best hour to post", "h3")
bestHourChart = HorizontalBarChart(["12am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"], [hourSeries])
hourSeries = Series("Engagement", [1.8, 2.1, 3.4, 4.2, 5.1, 8.9, 6.2])
bestHourTag = Tag("Peak: 6–7 PM", null, null, "success")

bestPostsCard = Card([bestPostsHeading, bestPostsTable], "sunk")
bestPostsHeading = Heading("Best posts this month", "h3")
bestPostsTable = Table([postCol, postPlatformCol, reachCol, engagementCol])
postCol = Col("Post", ["Summer Q&A reel", "POV morning routine", "3-app editing tutorial", "Behind the scenes"])
postPlatformCol = Col("Platform", ["Instagram", "TikTok", "YouTube", "Instagram"])
reachCol = Col("Reach", [48200, 37100, 29500, 21400])
engagementCol = Col("Engagement", ["8.4%", "7.1%", "6.2%", "5.8%"])

inboxRow = Card([commentsCard, collabCard], "clear", "row", "m")
commentsCard = Card([commentsHeading, commentsList, replyBtn], "sunk")
commentsHeading = Heading("Comments waiting for reply", "h3")
commentsList = ListBlock([comment1, comment2, comment3])
comment1 = ListItem("“This saved me hours — full tutorial?”", "Maya R. · 2h ago · Reel")
comment2 = ListItem("“What camera do you use?”", "Devon K. · 5h ago · Grid post")
comment3 = ListItem("“Part 2 please 🙏”", "Ana P. · 1d ago · TikTok")
replyBtn = Button("Reply in app", null, "secondary")
collabCard = Card([collabHeading, collabList], "sunk")
collabHeading = Heading("Pending collaboration requests", "h3")
collabList = ListBlock([collab1, collab2])
collab1 = ListItem("GlowSkin Co.", "Sponsored reel · $800 · due Fri")
collab2 = ListItem("Aurora Audio", "Product mention · $350 · due Sun")

scheduledCard = Card([scheduledHeading, scheduledList], "sunk")
scheduledHeading = Heading("Scheduled this week", "h3")
scheduledList = ListBlock([sched1, sched2, sched3, sched4])
sched1 = ListItem("Mon 4:00 PM · 60s reel", "Sunset outfit drop · Instagram")
sched2 = ListItem("Tue 6:30 PM · stitch", "Reacting to your comments · TikTok")
sched3 = ListItem("Thu 5:00 PM · short", "5 editing shortcuts · YouTube")
sched4 = ListItem("Sat 11:00 AM · carousel", "Weekly recap · Instagram")

scheduleCard = Card([scheduleHeading, scheduleForm], "sunk")
scheduleHeading = Heading("Schedule a post", "h3")
scheduleForm = Form("schedule-post", scheduleButtons, [captionField, postPlatformField, dateField, timeField])
scheduleButtons = Buttons([scheduleBtn])
scheduleBtn = Button("Schedule post", null, "primary")
captionField = FormControl("Caption", captionInput)
captionInput = TextArea("caption", "Write your caption…", 3)
postPlatformField = FormControl("Platform", postPlatformSelect)
postPlatformSelect = Select("post_platform", [spInsta, spTikTok, spYT, spX], "Choose platform")
spInsta = SelectItem("instagram", "Instagram")
spTikTok = SelectItem("tiktok", "TikTok")
spYT = SelectItem("youtube", "YouTube")
spX = SelectItem("x", "X (Twitter)")
dateField = FormControl("Date", publishDate)
publishDate = DatePicker("publish_at", "single")
timeField = FormControl("Time slot", timeSelect)
timeSelect = Select("time_slot", [time9, time12, time17, time19], "Choose time")
time9 = SelectItem("09:00", "9:00 AM")
time12 = SelectItem("12:00", "12:00 PM")
time17 = SelectItem("17:00", "5:00 PM")
time19 = SelectItem("19:00", "7:00 PM")