root = Card([header, kpiRow, bestPostsSection, audienceSection, scheduledSection, bestHourSection, commentsSection, collabsSection, scheduleFormSection], "card", "column", "l")

header = Card([titleBlock, platformFilter], "clear", "row", "m", "center", "between")
titleBlock = Card([mainTitle, subtitle], "clear", "column", "xs")
mainTitle = Heading("Creator Studio", "h2")
subtitle = TextContent("Cross-platform analytics & scheduling", "small")
platformFilter = Select("platform_filter", [filterAll, filterIG, filterTT, filterYT, filterTW], "All Platforms", null, "small")
filterAll = SelectItem("all", "All Platforms")
filterIG = SelectItem("instagram", "Instagram")
filterTT = SelectItem("tiktok", "TikTok")
filterYT = SelectItem("youtube", "YouTube")
filterTW = SelectItem("twitter", "X (Twitter)")

kpiRow = Card([followersKpi, engagementKpi, earningsKpi], "clear", "row", "m", "stretch", "between")
followersKpi = Card([followersLabel, followersValue, followersTrend], "sunk", "column", "s")
followersLabel = TextContent("Total Followers", "small")
followersValue = TextContent("2.4M", "large-heavy")
followersTrend = Tag("+12.3% vs last month", null, "sm", "success")
engagementKpi = Card([engagementLabel, engagementValue, engagementTrend], "sunk", "column", "s")
engagementLabel = TextContent("Engagement Rate", "small")
engagementValue = TextContent("4.8%", "large-heavy")
engagementTrend = Tag("+0.4pp vs last month", null, "sm", "success")
earningsKpi = Card([earningsLabel, earningsValue, earningsTrend], "sunk", "column", "s")
earningsLabel = TextContent("Earnings This Month", "small")
earningsValue = TextContent("$18,750", "large-heavy")
earningsTrend = Tag("+23% vs last month", null, "sm", "success")

bestPostsSection = Card([bestPostsHeader, bestPostsTable], "sunk", "column", "m")
bestPostsHeader = CardHeader("Best Posts This Month", "Top performing content by reach")
bestPostsTable = Table([postPlatform, postCaption, postReach, postEngagement, postDate])
postPlatform = Col("Platform", ["Instagram", "TikTok", "YouTube", "Instagram", "X"])
postCaption = Col("Caption", ["Behind the scenes of my new course launch 🚀", "POV: You're learning creator economics", "How I hit 1M subs — the real story", "Weekend vlog: Content batching tips", "Hot take: Consistency > Virality"])
postReach = Col("Reach", ["1.2M", "890K", "650K", "420K", "380K"])
postEngagement = Col("Engagement", ["8.2%", "12.4%", "6.1%", "9.3%", "7.8%"])
postDate = Col("Date", ["Mar 12", "Mar 8", "Mar 22", "Mar 3", "Mar 18"])

audienceSection = Card([audienceHeader, audienceChart], "sunk", "column", "m")
audienceHeader = CardHeader("Audience Split by Platform", "Follower distribution across channels")
audienceChart = PieChart(audienceLabels, audienceValues, "donut", "circular")
audienceLabels = ["Instagram", "TikTok", "YouTube", "X (Twitter)", "LinkedIn"]
audienceValues = [850000, 720000, 480000, 250000, 100000]

scheduledSection = Card([scheduledHeader, scheduledList], "sunk", "column", "m")
scheduledHeader = CardHeader("Posts Scheduled This Week", "7 posts queued across platforms")
scheduledList = ListBlock([scheduled1, scheduled2, scheduled3, scheduled4, scheduled5, scheduled6, scheduled7], "number")
scheduled1 = ListItem("Instagram Reel", "Mar 24 · 10:00 AM · Caption ready", null, "Edit")
scheduled2 = ListItem("TikTok", "Mar 25 · 7:00 PM · Needs review", null, "Edit")
scheduled3 = ListItem("YouTube Short", "Mar 26 · 12:00 PM · Scheduled", null, "View")
scheduled4 = ListItem("X Thread", "Mar 27 · 9:00 AM · Draft", null, "Edit")
scheduled5 = ListItem("Instagram Carousel", "Mar 28 · 11:00 AM · Approved", null, "View")
scheduled6 = ListItem("LinkedIn Post", "Mar 29 · 8:00 AM · Pending media", null, "Edit")
scheduled7 = ListItem("TikTok", "Mar 30 · 6:00 PM · Ready to post", null, "View")

bestHourSection = Card([bestHourHeader, bestHourChart], "sunk", "column", "m")
bestHourHeader = CardHeader("Best Hour to Post", "Based on 90-day engagement history")
bestHourChart = BarChart(hourLabels, [hourSeries], "grouped", "Hour (24h)", "Avg Engagement %")
hourLabels = ["6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
hourSeries = Series("Engagement Rate", [2.1, 2.8, 3.5, 4.2, 4.8, 5.1, 4.9, 4.5, 4.7, 5.3, 5.8, 6.2, 6.5, 6.1, 5.4, 4.8, 3.9, 2.5])

commentsSection = Card([commentsHeader, commentsList], "sunk", "column", "m")
commentsHeader = CardHeader("Comments Waiting for Reply", "24 comments need your attention")
commentsList = ListBlock([comment1, comment2, comment3, comment4, comment5], "number")
comment1 = ListItem("@creator_fan_123", "Instagram · 2h ago · \"Love the new course! When's module 3 dropping?\"", null, "Reply")
comment2 = ListItem("@tiktok_learner", "TikTok · 4h ago · \"This changed my perspective on monetization\"", null, "Reply")
comment3 = ListItem("@youtube_sub", "YouTube · 6h ago · \"Can you do a deep dive on brand deals?\"", null, "Reply")
comment4 = ListItem("@x_follower", "X · 8h ago · \"Your consistency tips are gold 💯\"", null, "Like")
comment5 = ListItem("@linkedin_pro", "LinkedIn · 12h ago · \"Great insights on creator economy trends\"", null, "Reply")

collabsSection = Card([collabsHeader, collabsList], "sunk", "column", "m")
collabsHeader = CardHeader("Pending Collaboration Requests", "3 brands waiting for response")
collabsList = ListBlock([collab1, collab2, collab3], "number")
collab1 = ListItem("Notion", "Sponsored video · $5,000 · 30-day exclusive", null, "Review")
collab2 = ListItem("Skillshare", "Course partnership · Revenue share · 50/50 split", null, "Review")
collab3 = ListItem("ConvertKit", "Affiliate program · 30% recurring · 12-month cookie", null, "Review")

scheduleFormSection = Card([scheduleHeader, scheduleForm], "sunk", "column", "m")
scheduleHeader = CardHeader("Schedule a New Post", "Create and queue content across platforms")
scheduleForm = Form("schedule_post", scheduleButtons, [platformField, captionField, dateField, timeField, mediaField])
platformField = FormControl("Platform", platformSelect, "Choose where to post")
platformSelect = Select("platform", [schedIG, schedTT, schedYT, schedTW, schedLI], "Select platform", null, "medium")
schedIG = SelectItem("instagram", "Instagram")
schedTT = SelectItem("tiktok", "TikTok")
schedYT = SelectItem("youtube", "YouTube")
schedTW = SelectItem("twitter", "X (Twitter)")
schedLI = SelectItem("linkedin", "LinkedIn")
captionField = FormControl("Caption", captionInput, "Add hashtags, mentions, and your message")
captionInput = TextArea("caption", "Write your caption here...", 4)
dateField = FormControl("Date", datePicker, "When should this go live?")
datePicker = DatePicker("post_date", "single")
timeField = FormControl("Time", timeInput, "Best time based on your audience: 5 PM - 7 PM")
timeInput = Input("post_time", "17:00", "time")
mediaField = FormControl("Media", mediaInput, "Attach images or video (max 500MB)")
mediaInput = Input("media", "Drag & drop or click to upload", "file")
scheduleButtons = Buttons([scheduleBtn, saveDraftBtn], "row")
scheduleBtn = Button("Schedule Post", null, "primary")
saveDraftBtn = Button("Save as Draft", null, "secondary")