root = Card([header, kpiRow, visitorsChart, trafficSourcesChart, campaignsSection, bestCampaignCallout, exportButton], "card", "column", "l")

header = Card([title, dateRangeSelector], "clear", "row", "m", "center", "between")
title = CardHeader("Marketing Weekly Dashboard", "Week of Jan 15 – Jan 21, 2024")
dateRangeSelector = Form("date-range", dateButtons, [dateField])
dateField = FormControl("Date range", datePicker)
datePicker = DatePicker("date_range", "range", null, ["2024-01-01", "2024-01-31"])
dateButtons = Buttons([applyBtn])
applyBtn = Button("Apply", null, "primary", "normal", "small")

kpiRow = Card([visitorsKpi, conversionKpi, subscribersKpi], "sunk", "row", "m", "stretch", "between")
visitorsKpi = Card([visitorsLabel, visitorsValue], "clear", "column", "xs", "center")
visitorsLabel = TextContent("Total Visitors", "small")
visitorsValue = TextContent("128,450", "large-heavy")
conversionKpi = Card([conversionLabel, conversionValue], "clear", "column", "xs", "center")
conversionLabel = TextContent("Conversion Rate", "small")
conversionValue = TextContent("3.24%", "large-heavy")
subscribersKpi = Card([subscribersLabel, subscribersValue], "clear", "column", "xs", "center")
subscribersLabel = TextContent("New Subscribers", "small")
subscribersValue = TextContent("2,840", "large-heavy")

visitorsChart = Card([visitorsHeading, visitorsAreaChart], "card", "column", "m")
visitorsHeading = Heading("Site Visitors (Last 30 Days)", "h3")
visitorsAreaChart = AreaChart(visitorLabels, [visitorsSeries], "natural", "Date", "Visitors")
visitorLabels = ["Jan 1", "Jan 2", "Jan 3", "Jan 4", "Jan 5", "Jan 6", "Jan 7", "Jan 8", "Jan 9", "Jan 10", "Jan 11", "Jan 12", "Jan 13", "Jan 14", "Jan 15", "Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20", "Jan 21", "Jan 22", "Jan 23", "Jan 24", "Jan 25", "Jan 26", "Jan 27", "Jan 28", "Jan 29", "Jan 30", "Jan 31"]
visitorsSeries = Series("Visitors", [3200, 3450, 3100, 3800, 4200, 3900, 3600, 4100, 4500, 4300, 4800, 5100, 4900, 5200, 5600, 5400, 5800, 6100, 5900, 6300, 6700, 6500, 6900, 7200, 7000, 7400, 7800, 7600, 8100, 8400])

trafficSourcesChart = Card([trafficHeading, trafficBarChart], "card", "column", "m")
trafficHeading = Heading("Top 5 Traffic Sources", "h3")
trafficBarChart = HorizontalBarChart(trafficLabels, [trafficSeries], "grouped", "Share %", "Source")
trafficLabels = ["Organic Search", "Direct", "Paid Search", "Referral", "Social"]
trafficSeries = Series("Share %", [42.5, 28.3, 15.2, 8.7, 5.3])

campaignsSection = Card([campaignsHeading, campaignsTable], "card", "column", "m")
campaignsHeading = Heading("Running Campaigns", "h3")
campaignsTable = Table([campaignNameCol, campaignSpendCol, campaignClicksCol, campaignConversionsCol, campaignCpaCol])
campaignNameCol = Col("Campaign", ["Summer Sale 2024", "Brand Awareness Q1", "Retargeting Cart Abandon", "New Product Launch", "Holiday Promo"])
campaignSpendCol = Col("Spend", [12500, 8200, 4500, 18900, 6700])
campaignClicksCol = Col("Clicks", [45200, 38100, 12800, 67400, 23500])
campaignConversionsCol = Col("Conversions", [1450, 980, 640, 2100, 520])
campaignCpaCol = Col("CPA", [8.62, 8.37, 7.03, 9.00, 12.88])

bestCampaignCallout = Callout("success", "Best Performing Campaign", "New Product Launch leads with 2,100 conversions at $9.00 CPA — 22% better than average. Consider increasing budget allocation.")

exportButton = Buttons([exportBtn])
exportBtn = Button("Export Report", null, "primary", "normal", "medium")