root = Card([header, platformFilter, kpiSection, engagementSection, bestPosts, audienceSplit, scheduleSection, bestHour, commentsPending, earningsSection, collabRequests, scheduleForm, footer])

header = CardHeader("Creator Studio", "Cross-platform overview for @yourhandle")

platformFilter = Form("platform-filter", filterButtons, [platformField])
platformField = FormControl("Platform", platformSelect)
platformSelect = Select("platform", [optAll, optInsta, optTik, optYT], "All platforms")
optAll = SelectItem("all", "All platforms")
optInsta = SelectItem("instagram", "Instagram")
optTik = SelectItem("tiktok", "TikTok")
optYT = SelectItem("youtube", "YouTube")
filterButtons = Buttons([applyFilter])
applyFilter = Button("Apply")

kpiSection = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Followers", "Growth (30d)", "Engagement rate", "Earnings (30d)"])
kpiValue = Col("Value", ["1,284,320", "+4.8%", "6.2%", "$12,480"])

engagementSection = Card([engagementHeading, engagementChart], "sunk")
engagementHeading = Heading("Follower growth — last 30 days", "h3")
engagementChart = AreaChart(["D1", "D5", "D10", "D15", "D20", "D25", "D30"], [growthSeries], "natural", "Day", "Followers")
growthSeries = Series("Followers", [1224000, 1231000, 1240000, 1248000, 1255000, 1269000, 1284320])

bestPosts = Card([bestPostsHeading, bestPostsTable], "sunk")
bestPostsHeading = Heading("Best posts this month", "h3")
bestPostsTable = Table([postName, postReach])
postName = Col("Post", ["Behind the scenes reel", "Tutorial thread", "Collab teaser", "Q&A live clip"])
postReach = Col("Reach", ["412K", "388K", "301K", "264K"])

audienceSplit = Card([audienceHeading, audienceChart], "sunk")
audienceHeading = Heading("Audience by platform", "h3")
audienceChart = PieChart(["Instagram", "TikTok", "YouTube", "X"], [45, 32, 18, 5], "donut")

scheduleSection = Card([scheduleHeading, scheduleList], "sunk")
scheduleHeading = Heading("Scheduled this week", "h3")
scheduleList = ListBlock([sched1, sched2, sched3, sched4], "number")
sched1 = ListItem("Reel — Summer drop", "Tue 10:00 AM · Instagram")
sched2 = ListItem("TikTok — Tutorial part 2", "Wed 6:30 PM · TikTok")
sched3 = ListItem("YouTube — Vlog", "Fri 4:00 PM · YouTube")
sched4 = ListItem("Story — Poll", "Sat 12:00 PM · Instagram")

bestHour = Card([bestHourHeading, bestHourChart], "sunk")
bestHourHeading = Heading("Best time to post", "h3")
bestHourChart = BarChart(["6a", "9a", "12p", "3p", "6p", "9p"], [bestHourSeries], "grouped", "Hour", "Avg engagement")
bestHourSeries = Series("Engagement", [2.1, 3.4, 4.8, 5.6, 6.2, 4.1])

commentsPending = Card([commentsHeading, commentsList], "sunk")
commentsHeading = Heading("Comments awaiting reply", "h3")
commentsList = ListBlock([comment1, comment2, comment3])
comment1 = ListItem("@fansarah", "Loved this! When is part 3?")
comment2 = ListItem("@creatorjoe", "Can you share the gear list?")
comment3 = ListItem("@mikep", "This helped a lot, thank you")

earningsSection = Card([earningsHeading, earningsInfo], "sunk")
earningsHeading = Heading("Earnings this month", "h3")
earningsInfo = TextContent("**$12,480** across all platforms. Up 12% from last month.", "large")

collabRequests = Card([collabHeading, collabList], "sunk")
collabHeading = Heading("Pending collaboration requests", "h3")
collabList = ListBlock([collab1, collab2])
collab1 = ListItem("Brand X — Sponsored reel", "Budget $2,000 · Due reply by Fri")
collab2 = ListItem("Creator Y — Duet", "Mutual promo · Awaiting your reply")

scheduleForm = Card([scheduleFormHeading, scheduleFormBody], "sunk")
scheduleFormHeading = Heading("Schedule a new post", "h3")
scheduleFormBody = Form("schedule-post", scheduleButtons, [captionField, timeField, platformField2])
captionField = FormControl("Caption", captionInput)
captionInput = Input("caption", "Write your caption…", "text")
timeField = FormControl("Post time", timeInput)
timeInput = Input("post_time", "2025-06-10 18:00", "text")
platformField2 = FormControl("Platform", platformSelect2)
platformSelect2 = Select("post_platform", [optInsta2, optTik2, optYT2], "Instagram")
optInsta2 = SelectItem("instagram", "Instagram")
optTik2 = SelectItem("tiktok", "TikTok")
optYT2 = SelectItem("youtube", "YouTube")
scheduleButtons = Buttons([scheduleBtn, cancelBtn])
scheduleBtn = Button("Schedule post", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")

footer = FollowUpBlock([follow1, follow2])
follow1 = FollowUpItem("Show me a weekly content plan")
follow2 = FollowUpItem("Draft a reply to pending comments")