root = Card([header, platformFilter, kpiSection, growthSection, bestPostsSection, audienceSection, scheduleSection, bestHourSection, commentsSection, earningsSection, collabSection, scheduleFormSection, followUp])
header = CardHeader("Creator Studio", "Cross-platform analytics & planning")
platformFilter = Card([filterLabel, filterButtons], "sunk", "column", "s")
filterLabel = TextContent("**Filter by platform**", "small")
filterButtons = Buttons([allBtn, instaBtn, tiktokBtn, youtubeBtn])
allBtn = Button("All platforms")
instaBtn = Button("Instagram")
tiktokBtn = Button("TikTok")
youtubeBtn = Button("YouTube")

kpiSection = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Overview", "h3")
kpiTable = Table([metricCol, valueCol])
metricCol = Col("Metric", ["Followers", "Engagement rate", "Earnings (month)"])
valueCol = Col("Value", ["248,392", "4.8%", "$12,450"])

growthSection = Card([growthHeading, growthChart], "sunk")
growthHeading = Heading("Follower growth — past month", "h3")
growthChart = LineChart(["Wk 1", "Wk 2", "Wk 3", "Wk 4"], [growthSeries], "natural", "Week", "Followers")
growthSeries = Series("Followers", [238100, 241850, 245020, 248392])

bestPostsSection = Card([bestPostsHeading, bestPostsTable], "sunk")
bestPostsHeading = Heading("Best posts this month", "h3")
bestPostsTable = Table([postCol, platformCol, reachCol])
postCol = Col("Post", ["Summer lookbook reel", "5-minute vlog", "Backstage photo dump"])
platformCol = Col("Platform", ["Instagram", "YouTube", "TikTok"])
reachCol = Col("Reach", ["86,200", "74,900", "61,350"])

audienceSection = Card([audienceHeading, audienceChart], "sunk")
audienceHeading = Heading("Audience split by platform", "h3")
audienceChart = PieChart(["Instagram", "TikTok", "YouTube"], [42, 35, 23], "donut")

scheduleSection = Card([scheduleHeading, scheduleTable], "sunk")
scheduleHeading = Heading("Scheduled this week", "h3")
scheduleTable = Table([dayCol, postCol, platformCol2, timeCol])
dayCol = Col("Day", ["Mon", "Tue", "Thu", "Fri"])
postCol = Col("Post", ["Reel: outfit inspo", "Story: Q&A", "Video: tutorial", "Carousel: top tips"])
platformCol2 = Col("Platform", ["Instagram", "Instagram", "YouTube", "TikTok"])
timeCol = Col("Time", ["18:00", "17:30", "16:00", "19:00"])

bestHourSection = Card([bestHourHeading, bestHourChart], "sunk")
bestHourHeading = Heading("Best hour to post (by history)", "h3")
bestHourChart = BarChart(["12", "14", "16", "18", "20", "22"], [bestHourSeries], "grouped", "Hour", "Engagement")
bestHourSeries = Series("Avg engagement", [1200, 1800, 2600, 4200, 5100, 3800])

commentsSection = Card([commentsHeading, commentsList], "sunk")
commentsHeading = Heading("Comments awaiting reply", "h3")
commentsList = ListBlock([comment1, comment2, comment3], "number")
comment1 = ListItem("Maria", "Love this outfit! Where is the jacket from?")
comment2 = ListItem("Dev", "Can you make a part 2 of the tutorial?")
comment3 = ListItem("Sam", "What camera do you use?")

earningsSection = Card([earningsHeading, earningsChart], "sunk")
earningsHeading = Heading("Earnings this month", "h3")
earningsChart = AreaChart(["Wk 1", "Wk 2", "Wk 3", "Wk 4"], [earningsSeries], "natural", "Week", "USD")
earningsSeries = Series("Earnings", [2100, 3100, 3400, 3850])

collabSection = Card([collabHeading, collabList], "sunk")
collabHeading = Heading("Pending collaboration requests", "h3")
collabList = ListBlock([collab1, collab2], "number")
collab1 = ListItem("Brand X", "Sponsored reel — 30s, $2,000")
collab2 = ListItem("Style Co.", "Product placement — 3 posts, $1,500")

scheduleFormSection = Card([scheduleFormHeading, scheduleForm], "sunk")
scheduleFormHeading = Heading("Schedule a new post", "h3")
scheduleForm = Form("schedule-post", scheduleButtons, [captionField, platformField, dateField])
captionField = FormControl("Caption", captionInput)
captionInput = TextArea("caption", "Write your caption...", 4)
platformField = FormControl("Platform", platformSelect)
platformSelect = Select("platform", [platInsta, platTik, platYt], "Choose a platform")
platInsta = SelectItem("instagram", "Instagram")
platTik = SelectItem("tiktok", "TikTok")
platYt = SelectItem("youtube", "YouTube")
dateField = FormControl("Post time", datePick)
datePick = DatePicker("post_time", "single")
scheduleButtons = Buttons([scheduleBtn])
scheduleBtn = Button("Schedule post", null, "primary")

followUp = FollowUpBlock([f1, f2, f3])
f1 = FollowUpItem("Show me Instagram analytics")
f2 = FollowUpItem("Suggest a caption for my next post")
f3 = FollowUpItem("Draft a reply to Maria's comment")