root = Card([platformFilter, overview, followerGrowth, bestPosts, audienceSplit, scheduledPosts, bestHour, pendingComments, earnings, collaborations, scheduleForm], "card", "column", "l")

platformFilter = Form("platform-filter", filterButtons, [platformField])
platformField = FormControl("Filter by platform", platformSelect, "Select a platform to narrow all metrics")
platformSelect = Select("platform", platformOptions, "All platforms", null, "medium")
platformOptions = [optAll, optIG, optTT, optYT, optTW, optLI]
optAll = SelectItem("all", "All platforms")
optIG = SelectItem("instagram", "Instagram")
optTT = SelectItem("tiktok", "TikTok")
optYT = SelectItem("youtube", "YouTube")
optTW = SelectItem("twitter", "X (Twitter)")
optLI = SelectItem("linkedin", "LinkedIn")
filterButtons = Buttons([filterApplyBtn])
filterApplyBtn = Button("Apply filter", null, "primary")

overview = Card([followersCard, engagementCard, earningsCard], "clear", "row", "m", "stretch", "between")
followersCard = Card([followersLabel, followersValue, followersGrowth], "sunk", "column", "s")
followersLabel = TextContent("Total followers", "small-heavy")
followersValue = TextContent("2.4M", "large-heavy")
followersGrowth = TextContent("+12.3% vs last month", "small")
engagementCard = Card([engagementLabel, engagementValue, engagementTrend], "sunk", "column", "s")
engagementLabel = TextContent("Engagement rate", "small-heavy")
engagementValue = TextContent("4.8%", "large-heavy")
engagementTrend = TextContent("+0.4pp vs last month", "small")
earningsCard = Card([earningsLabel, earningsValue, earningsTrend], "sunk", "column", "s")
earningsLabel = TextContent("Earnings this month", "small-heavy")
earningsValue = TextContent("$18,450", "large-heavy")
earningsTrend = TextContent("+22% vs last month", "small")

followerGrowth = Card([growthHeader, growthChart], "sunk", "column", "m")
growthHeader = CardHeader("Follower growth (30 days)", "Net followers gained per platform")
growthChart = LineChart(growthLabels, growthSeries, "natural", "Day", "Followers")
growthLabels = ["Day 1", "Day 5", "Day 10", "Day 15", "Day 20", "Day 25", "Day 30"]
growthSeries = [igSeries, ttSeries, ytSeries, twSeries, liSeries, totalSeries]
igSeries = Series("Instagram", [1200, 1450, 1680, 1920, 2100, 2350, 2580])
ttSeries = Series("TikTok", [800, 1100, 1450, 1800, 2200, 2650, 3100])
ytSeries = Series("YouTube", [300, 420, 510, 620, 710, 820, 950])
twSeries = Series("X (Twitter)", [200, 280, 350, 410, 480, 540, 610])
liSeries = Series("LinkedIn", [150, 190, 240, 280, 320, 370, 420])
totalSeries = Series("Total", [2650, 3440, 4230, 5030, 5810, 6730, 7660])

bestPosts = Card([postsHeader, postsTable], "sunk", "column", "m")
postsHeader = CardHeader("Best posts this month", "Top 5 by reach")
postsTable = Table([postPlatform, postPreview, postReach, postEngagement, postDate])
postPlatform = Col("Platform", ["TikTok", "Instagram", "YouTube", "X (Twitter)", "LinkedIn"])
postPreview = Col("Post", ["Dance challenge #viral", "Behind the scenes reel", "Tutorial: Lighting setup", "Hot take thread", "Career advice carousel"])
postReach = Col("Reach", [1.2e6, 890000, 450000, 320000, 180000], "number")
postEngagement = Col("Engagement", ["8.2%", "6.7%", "5.4%", "4.9%", "7.1%"])
postDate = Col("Date", ["Mar 3", "Mar 12", "Mar 18", "Mar 22", "Mar 28"])

audienceSplit = Card([audienceHeader, audienceChart], "sunk", "column", "m")
audienceHeader = CardHeader("Audience by platform", "Follower distribution across platforms")
audienceChart = PieChart(audienceLabels, audienceValues, "donut", "circular")
audienceLabels = ["TikTok", "Instagram", "YouTube", "X (Twitter)", "LinkedIn"]
audienceValues = [850000, 720000, 420000, 280000, 130000]

scheduledPosts = Card([schedHeader, schedList], "sunk", "column", "m")
schedHeader = CardHeader("Posts scheduled this week", "7 posts queued")
schedList = ListBlock(schedItems, "number")
schedItems = [sched1, sched2, sched3, sched4, sched5, sched6, sched7]
sched1 = ListItem("TikTok • Mar 31, 7:00 PM", "Dance trend + product placement", null, "Edit")
sched2 = ListItem("Instagram • Apr 1, 11:00 AM", "Carousel: 5 editing tips", null, "Edit")
sched3 = ListItem("YouTube • Apr 2, 4:00 PM", "Tutorial: Color grading basics", null, "Edit")
sched4 = ListItem("X (Twitter) • Apr 3, 9:00 AM", "Thread: Algorithm changes", null, "Edit")
sched5 = ListItem("LinkedIn • Apr 3, 8:00 AM", "Personal story: Burnout recovery", null, "Edit")
sched6 = ListItem("Instagram • Apr 4, 6:00 PM", "Reel: Day in the life", null, "Edit")
sched7 = ListItem("TikTok • Apr 5, 12:00 PM", "Q&A with followers", null, "Edit")

bestHour = Card([hourHeader, hourContent], "sunk", "column", "m")
hourHeader = CardHeader("Best hour to post", "Based on 90-day engagement history")
hourContent = TextContent("🕐 7:00 PM EST (Tuesday–Thursday) — average 23% higher engagement than daily mean", "default")

pendingComments = Card([commentsHeader, commentsList], "sunk", "column", "m")
commentsHeader = CardHeader("Comments waiting for reply", "12 unanswered comments across platforms")
commentsList = ListBlock(commentItems, "number")
commentItems = [c1, c2, c3, c4, c5]
c1 = ListItem("TikTok • \"Dance challenge #viral\"", "@user123: \"What shoes are those?\" • 2h ago", null, "Reply")
c2 = ListItem("Instagram • \"Behind the scenes reel\"", "@creator_fan: \"Love your energy!\" • 4h ago", null, "Reply")
c3 = ListItem("YouTube • \"Tutorial: Lighting setup\"", "@video_pro: \"Which softbox?\" • 6h ago", null, "Reply")
c4 = ListItem("X (Twitter) • \"Hot take thread\"", "@debate_me: \"Disagree but respect it\" • 8h ago", null, "Reply")
c5 = ListItem("LinkedIn • \"Career advice carousel\"", "@junior_dev: \"Saved this, thanks!\" • 12h ago", null, "Reply")

earnings = Card([earnHeader, earnBreakdown], "sunk", "column", "m")
earnHeader = CardHeader("Earnings this month", "$18,450 total • +22% vs last month")
earnBreakdown = Table([earnSource, earnAmount, earnChange])
earnSource = Col("Source", ["Brand deals", "Ad revenue", "Affiliate", "Digital products", "Tips/Donations"])
earnAmount = Col("Amount", [9200, 4100, 2800, 1650, 700], "number")
earnChange = Col("vs Last month", ["+35%", "+12%", "+8%", "+45%", "-5%"])

collaborations = Card([collabHeader, collabList], "sunk", "column", "m")
collabHeader = CardHeader("Pending collaboration requests", "4 brands awaiting response")
collabList = ListBlock(collabItems, "number")
collabItems = [collab1, collab2, collab3, collab4]
collab1 = ListItem("Nike • Instagram + TikTok", "Paid partnership • 3 posts + 5 stories • $8,500", null, "Review")
collab2 = ListItem("Adobe • YouTube", "Sponsored video • 1 dedicated + 2 integrations • $12,000", null, "Review")
collab3 = ListItem("Notion • X (Twitter) + LinkedIn", "Affiliate + 2 posts • 30% commission + $2,000 flat", null, "Review")
collab4 = ListItem("Skillshare • All platforms", "Ambassador program • 6-month • $15,000 + rev share", null, "Review")

scheduleForm = Card([formHeader, form], "sunk", "column", "m")
formHeader = CardHeader("Schedule a new post", "Create and queue content across platforms")
form = Form("schedule-post", formButtons, [schedPlatformField, schedCaptionField, schedDateTimeField])
schedPlatformField = FormControl("Platform", schedPlatformSelect, "Choose where to publish")
schedPlatformSelect = Select("sched_platform", schedPlatformOptions, "Select platform", null, "medium")
schedPlatformOptions = [schedOptIG, schedOptTT, schedOptYT, schedOptTW, schedOptLI]
schedOptIG = SelectItem("instagram", "Instagram")
schedOptTT = SelectItem("tiktok", "TikTok")
schedOptYT = SelectItem("youtube", "YouTube")
schedOptTW = SelectItem("twitter", "X (Twitter)")
schedOptLI = SelectItem("linkedin", "LinkedIn")
schedCaptionField = FormControl("Caption", schedCaptionInput, "Include hashtags, mentions, and links")
schedCaptionInput = TextArea("caption", "Write your caption here...", 4)
schedDateTimeField = FormControl("Schedule date & time", schedDatePicker, "Pick when to publish")
schedDatePicker = DatePicker("schedule_time", "single", null, null)
formButtons = Buttons([scheduleBtn, cancelBtn], "row")
scheduleBtn = Button("Schedule post", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")