root = Card([header, platformTabs, kpiRow, growthSection, engagementSection, bestPostsSection, audienceSection, scheduledSection, bestHourSection, commentsSection, earningsSection, collaborationsSection, scheduleFormSection], "card", "column", "l")

header = CardHeader("Creator Studio", "Cross-platform analytics & scheduling")

platformTabs = Tabs([platformAll, platformTikTok, platformInstagram, platformYouTube, platformTwitter])

platformAll = TabItem("all", "All Platforms", [allContent])
platformTikTok = TabItem("tiktok", "TikTok", [tiktokContent])
platformInstagram = TabItem("instagram", "Instagram", [instagramContent])
platformYouTube = TabItem("youtube", "YouTube", [youtubeContent])
platformTwitter = TabItem("twitter", "X (Twitter)", [twitterContent])

allContent = Card([TextContent("Showing aggregated data across all connected platforms. Select a platform tab to filter metrics.")], "clear")
tiktokContent = Card([TextContent("TikTok-specific metrics and content.")], "clear")
instagramContent = Card([TextContent("Instagram-specific metrics and content.")], "clear")
youtubeContent = Card([TextContent("YouTube-specific metrics and content.")], "clear")
twitterContent = Card([TextContent("X (Twitter)-specific metrics and content.")], "clear")

kpiRow = Card([followersCard, engagementCard, earningsCard], "clear", "row", "l", "stretch", "between")

followersCard = Card([followersTitle, followersValue, followersGrowth], "card", "column", "s")
followersTitle = TextContent("Total Followers", "small-heavy")
followersValue = TextContent("247.3K", "large-heavy")
followersGrowth = Tag("+12.4% vs last month", null, "sm", "success")

engagementCard = Card([engagementTitle, engagementValue, engagementTrend], "card", "column", "s")
engagementTitle = TextContent("Engagement Rate", "small-heavy")
engagementValue = TextContent("4.8%", "large-heavy")
engagementTrend = Tag("+0.3pp vs last month", null, "sm", "success")

earningsCard = Card([earningsTitle, earningsValue, earningsTrend], "card", "column", "s")
earningsTitle = TextContent("Earnings This Month", "small-heavy")
earningsValue = TextContent("$8,420", "large-heavy")
earningsTrend = Tag("+18% vs last month", null, "sm", "success")

growthSection = Card([growthHeader, followerGrowthChart], "card", "column", "m")
growthHeader = CardHeader("Follower Growth (Past 30 Days)")
followerGrowthChart = LineChart(growthLabels, [growthSeries], "natural", "Date", "Followers")
growthLabels = ["Day 1", "Day 5", "Day 10", "Day 15", "Day 20", "Day 25", "Day 30"]
growthSeries = Series("Followers", [215000, 221000, 228500, 234200, 240100, 244800, 247300])

engagementSection = Card([engagementHeader, engagementBreakdown], "card", "column", "m")
engagementHeader = CardHeader("Engagement Breakdown")
engagementBreakdown = Table([engMetricCol, engValueCol, engChangeCol])
engMetricCol = Col("Metric", ["Likes", "Comments", "Shares", "Saves", "Profile Visits"])
engValueCol = Col("Count", [89200, 12400, 8900, 15600, 23100])
engChangeCol = Col("vs Last Month", ["+8%", "+15%", "+5%", "+22%", "+12%"])

bestPostsSection = Card([bestPostsHeader, bestPostsTable], "card", "column", "m")
bestPostsHeader = CardHeader("Best Posts This Month", "Top 5 by reach")
bestPostsTable = Table([postPlatformCol, postCaptionCol, postReachCol, postEngagementCol, postDateCol])
postPlatformCol = Col("Platform", ["TikTok", "Instagram", "YouTube", "TikTok", "Instagram"])
postCaptionCol = Col("Caption", ["POV: My morning routine ☕", "Behind the scenes of my latest collab", "How I edit my videos in 60 seconds", "Reacting to my first viral video", "Q&A: Your questions answered"])
postReachCol = Col("Reach", [482000, 315000, 287000, 245000, 198000])
postEngagementCol = Col("Engagement", ["12.4%", "8.7%", "6.2%", "9.1%", "7.8%"])
postDateCol = Col("Posted", ["Mar 3", "Mar 8", "Mar 12", "Mar 18", "Mar 24"])

audienceSection = Card([audienceHeader, audienceChart], "card", "column", "m")
audienceHeader = CardHeader("Audience Split by Platform")
audienceChart = PieChart(audienceLabels, audienceValues, "donut", "circular")
audienceLabels = ["TikTok", "Instagram", "YouTube", "X (Twitter)"]
audienceValues = [98500, 72300, 54200, 22300]

scheduledSection = Card([scheduledHeader, scheduledList], "card", "column", "m")
scheduledHeader = CardHeader("Posts Scheduled This Week", "7 posts queued")
scheduledList = ListBlock([scheduled1, scheduled2, scheduled3, scheduled4, scheduled5, scheduled6, scheduled7], "number")
scheduled1 = ListItem("TikTok — Productivity tips", "Mon 9:00 AM • Caption ready • Hashtags set", null, "Edit")
scheduled2 = ListItem("Instagram Reel — Day in life", "Tue 11:00 AM • Needs cover image", null, "Edit")
scheduled3 = ListItem("YouTube Shorts — Editing hack", "Wed 2:00 PM • Ready to publish", null, "Edit")
scheduled4 = ListItem("X (Twitter) — Thread: Growth tips", "Thu 8:00 AM • Draft complete", null, "Edit")
scheduled5 = ListItem("TikTok — Collab announcement", "Fri 12:00 PM • Waiting for partner approval", null, "Edit")
scheduled6 = ListItem("Instagram Carousel — Gear guide", "Sat 10:00 AM • Images uploaded", null, "Edit")
scheduled7 = ListItem("YouTube — Monthly recap", "Sun 5:00 PM • Rendering", null, "Edit")

bestHourSection = Card([bestHourHeader, bestHourChart], "card", "column", "m")
bestHourHeader = CardHeader("Best Hour to Post", "Based on 90-day engagement history")
bestHourChart = BarChart(hourLabels, [hourSeries], "grouped", "Hour (24h)", "Avg Engagement Rate")
hourLabels = ["6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
hourSeries = Series("Engagement %", [2.1, 2.8, 3.5, 4.2, 4.8, 5.1, 4.9, 4.3, 3.8, 3.4, 3.1, 3.6, 4.5, 5.3, 5.0, 4.2, 3.7, 2.9])

commentsSection = Card([commentsHeader, commentsList], "card", "column", "m")
commentsHeader = CardHeader("Comments Waiting for Reply", "23 unread across platforms")
commentsList = ListBlock([comment1, comment2, comment3, comment4, comment5], "number")
comment1 = ListItem("@creator_fan on TikTok", "\"Love this! What camera do you use?\" • 2h ago", null, "Reply")
comment2 = ListItem("@design_lover on Instagram", "\"The color grading is insane 😍\" • 4h ago", null, "Reply")
comment3 = ListItem("@tech_reviewer on YouTube", "\"Great breakdown, subbed!\" • 6h ago", null, "Reply")
comment4 = ListItem("@marketing_pro on X", "\"This thread should be required reading\" • 8h ago", null, "Reply")
comment5 = ListItem("@newbie_creator on TikTok", "\"How long did it take to grow to 100k?\" • 12h ago", null, "Reply")

earningsSection = Card([earningsHeader, earningsBreakdown], "card", "column", "m")
earningsHeader = CardHeader("Earnings This Month", "$8,420 total • $1,200 pending")
earningsBreakdown = Table([earnSourceCol, earnAmountCol, earnStatusCol])
earnSourceCol = Col("Source", ["TikTok Creator Fund", "Instagram Bonuses", "YouTube AdSense", "Brand Deals", "Affiliate Links", "Digital Products"])
earnAmountCol = Col("Amount", ["$1,200", "$800", "$2,100", "$3,500", "$420", "$400"])
earnStatusCol = Col("Status", ["Paid", "Paid", "Paid", "Pending", "Paid", "Paid"])

collaborationsSection = Card([collabHeader, collabList], "card", "column", "m")
collabHeader = CardHeader("Pending Collaboration Requests", "4 awaiting response")
collabList = ListBlock([collab1, collab2, collab3, collab4], "number")
collab1 = ListItem("TechGear Co — Sponsored Review", "$2,500 • 2 posts + 3 stories • Expires Mar 28", null, "Review")
collab2 = ListItem("EditPro App — Affiliate Partnership", "30% commission • 6-month term • Expires Mar 30", null, "Review")
collab3 = ListItem("CreatorCollective — Cross-promo", "Audience swap • 1 video each • Expires Apr 5", null, "Review")
collab4 = ListItem("AudioLabs — Product Placement", "$1,800 • 1 dedicated video • Expires Apr 10", null, "Review")

scheduleFormSection = Card([scheduleFormHeader, scheduleForm], "card", "column", "m")
scheduleFormHeader = CardHeader("Schedule a New Post")
scheduleForm = Form("schedule-post", scheduleButtons, [platformField, captionField, mediaField, dateField, timeField, hashtagField, platformSpecificField])
platformField = FormControl("Platform", platformSelect, "Choose where to publish")
platformSelect = Select("platform", [selTikTok, selInstagram, selYouTube, selTwitter, selLinkedIn], "Select platform")
selTikTok = SelectItem("tiktok", "TikTok")
selInstagram = SelectItem("instagram", "Instagram Reels")
selYouTube = SelectItem("youtube", "YouTube Shorts")
selTwitter = SelectItem("twitter", "X (Twitter)")
selLinkedIn = SelectItem("linkedin", "LinkedIn")
captionField = FormControl("Caption", captionInput, "Include hashtags, mentions, and call-to-action")
captionInput = TextArea("caption", "Write your caption here...", 4)
mediaField = FormControl("Media", mediaInput, "Upload video or image (max 500MB)")
mediaInput = Input("media", "Drag & drop or click to upload", "file")
dateField = FormControl("Date", datePicker, "When should this go live?")
datePicker = DatePicker("post_date", "single")
timeField = FormControl("Time", timeInput, "Best time based on your audience: 7:00 PM")
timeInput = Input("post_time", "19:00", "time")
hashtagField = FormControl("Hashtags", hashtagInput, "Comma-separated, max 30")
hashtagInput = Input("hashtags", "#creator #growth #tips")
platformSpecificField = FormControl("Platform-Specific Options", platformOptionsCard, "Additional settings per platform")
platformOptionsCard = Card([tiktokOptions, instagramOptions, youtubeOptions], "sunk", "column", "m")
tiktokOptions = TextContent("TikTok: Allow duet/stitch, add location, select sound")
instagramOptions = TextContent("Instagram: Add location, tag products, allow remixing, share to feed")
youtubeOptions = TextContent("YouTube: Set visibility, add to playlist, select category, allow comments")
scheduleButtons = Buttons([scheduleSubmitBtn, scheduleDraftBtn, scheduleCancelBtn], "row")
scheduleSubmitBtn = Button("Schedule Post", null, "primary")
scheduleDraftBtn = Button("Save as Draft", null, "secondary")
scheduleCancelBtn = Button("Cancel", null, "tertiary")