root = Card([header, balancesSection, recentTransactionsSection, spendingSection, billsSection, vacationGoalSection, creditScoreSection, transferMoneySection, freezeCreditSection, statementPeriodSection, alertTriggersSection, disputeTransactionSection], "card", "column", "l")

header = CardHeader("Personal Banking", "Welcome back — here's your financial overview")

balancesSection = Card([balancesHeader, checkingCard, savingsCard, creditCard], "sunk", "row", "m", "stretch", "center", true)
balancesHeader = Heading("Account Balances", "h3")
checkingCard = Card([checkingTitle, checkingBalance], "card", "column", "s")
checkingTitle = TextContent("Checking", "small-heavy")
checkingBalance = TextContent("$4,287.50", "large-heavy")
savingsCard = Card([savingsTitle, savingsBalance], "card", "column", "s")
savingsTitle = TextContent("Savings", "small-heavy")
savingsBalance = TextContent("$12,450.00", "large-heavy")
creditCard = Card([creditTitle, creditBalance, creditLimit], "card", "column", "s")
creditTitle = TextContent("Credit Card", "small-heavy")
creditBalance = TextContent("-$1,842.30", "large-heavy")
creditLimit = TextContent("Limit: $10,000 • Available: $8,157.70", "small")

recentTransactionsSection = Card([transactionsHeader, transactionsTable], "sunk", "column", "m")
transactionsHeader = Heading("Recent Transactions", "h3")
transactionsTable = Table([txnDateCol, txnMerchantCol, txnAmountCol, txnStatusCol])
txnDateCol = Col("Date", ["2024-01-15", "2024-01-14", "2024-01-13", "2024-01-12", "2024-01-11"])
txnMerchantCol = Col("Merchant", ["Whole Foods Market", "Shell Gas Station", "Amazon.com", "Netflix", "Uber Ride"])
txnAmountCol = Col("Amount", ["-$87.42", "-$45.00", "-$124.99", "-$15.99", "-$22.50"])
txnStatusCol = Col("Status", ["Posted", "Posted", "Pending", "Posted", "Posted"])

spendingSection = Card([spendingHeader, spendingChart], "sunk", "column", "m")
spendingHeader = Heading("Spending by Category (This Month)", "h3")
spendingChart = PieChart(spendingLabels, spendingValues, "donut", "circular")
spendingLabels = ["Groceries", "Transport", "Dining", "Shopping", "Entertainment", "Utilities", "Other"]
spendingValues = [420, 180, 310, 275, 120, 95, 85]

billsSection = Card([billsHeader, billsList], "sunk", "column", "m")
billsHeader = Heading("Bills Due Soon", "h3")
billsList = ListBlock([bill1, bill2, bill3, bill4], "number")
bill1 = ListItem("Electric Bill", "Due Jan 20 • $87.50", null, "Pay")
bill2 = ListItem("Internet", "Due Jan 22 • $65.00", null, "Pay")
bill3 = ListItem("Phone Bill", "Due Jan 25 • $120.00", null, "Pay")
bill4 = ListItem("Insurance", "Due Feb 1 • $145.00", null, "Pay")

vacationGoalSection = Card([vacationHeader, vacationProgress, vacationDetails], "sunk", "column", "m")
vacationHeader = Heading("Vacation Savings Goal", "h3")
vacationProgress = Progress(65, "$3,250 of $5,000 saved")
vacationDetails = TextContent("Target date: June 2024 • $295/month needed to stay on track", "small")

creditScoreSection = Card([creditScoreHeader, creditScoreValue, creditScoreFactors], "sunk", "column", "m")
creditScoreHeader = Heading("Credit Score", "h3")
creditScoreValue = TextContent("742", "large-heavy")
creditScoreFactors = TagBlock(["Good payment history", "Low utilization", "Long credit history", "Few inquiries"])

transferMoneySection = Card([transferHeader, transferForm], "sunk", "column", "m")
transferHeader = Heading("Move Money", "h3")
transferForm = Form("transfer-money", transferButtons, [fromAccountField, toAccountField, amountField])
fromAccountField = FormControl("From Account", fromAccountSelect)
fromAccountSelect = Select("from_account", [fromChecking, fromSavings, fromCredit], "Select account")
fromChecking = SelectItem("checking", "Checking • $4,287.50")
fromSavings = SelectItem("savings", "Savings • $12,450.00")
fromCredit = SelectItem("credit", "Credit Card • -$1,842.30")
toAccountField = FormControl("To Account", toAccountSelect)
toAccountSelect = Select("to_account", [toChecking, toSavings, toCredit], "Select account")
toChecking = SelectItem("checking", "Checking • $4,287.50")
toSavings = SelectItem("savings", "Savings • $12,450.00")
toCredit = SelectItem("credit", "Credit Card • -$1,842.30")
amountField = FormControl("Amount", amountInput, "Enter amount to transfer")
amountInput = Input("amount", "0.00", "number", null, "")
transferButtons = Buttons([transferSubmitBtn, transferCancelBtn])
transferSubmitBtn = Button("Transfer", null, "primary")
transferCancelBtn = Button("Cancel", null, "tertiary")

freezeCreditSection = Card([freezeHeader, freezeToggle, freezeStatus], "sunk", "column", "m")
freezeHeader = Heading("Credit Line Freeze", "h3")
freezeToggle = SwitchGroup("credit-freeze", [freezeSwitch], "card")
freezeSwitch = SwitchItem("Freeze credit line", "Prevents new charges on your credit card. Recurring payments will still process.", "freeze_enabled", false)
freezeStatus = TextContent("Credit line is currently active. New transactions are allowed.", "small")

statementPeriodSection = Card([statementHeader, statementPeriodSelect], "sunk", "column", "m")
statementHeader = Heading("Statement Period", "h3")
statementPeriodSelect = Select("statement_period", [periodThisMonth, periodLastMonth, periodLast3Months, periodCustom], "Select period")
periodThisMonth = SelectItem("this_month", "This Month (Jan 1 – Jan 31)")
periodLastMonth = SelectItem("last_month", "Last Month (Dec 1 – Dec 31)")
periodLast3Months = SelectItem("last_3_months", "Last 3 Months (Nov 1 – Jan 31)")
periodCustom = SelectItem("custom", "Custom Range…")

alertTriggersSection = Card([alertsHeader, alertsDescription, alertsCheckboxes], "sunk", "column", "m")
alertsHeader = Heading("Alert Triggers", "h3")
alertsDescription = TextContent("Choose which events send you notifications", "small")
alertsCheckboxes = CheckBoxGroup("alert_triggers", [alertLargeTxn, alertLowBalance, alertBillDue, alertCreditUtil, alertLogin, alertPasswordChange])
alertLargeTxn = CheckBoxItem("Large Transactions", "Notify me of transactions over $100", "large_txn", true)
alertLowBalance = CheckBoxItem("Low Balance", "Alert when any account drops below $500", "low_balance", true)
alertBillDue = CheckBoxItem("Upcoming Bills", "Remind me 3 days before a bill is due", "bill_due", true)
alertCreditUtil = CheckBoxItem("Credit Utilization", "Warn when credit usage exceeds 30%", "credit_util", false)
alertLogin = CheckBoxItem("New Login", "Alert on sign-in from new device or location", "new_login", true)
alertPasswordChange = CheckBoxItem("Password Changes", "Notify me when my password is changed", "password_change", true)

disputeTransactionSection = Card([disputeHeader, disputeDescription, disputeForm], "sunk", "column", "m")
disputeHeader = Heading("Dispute a Transaction", "h3")
disputeDescription = TextContent("Select a recent transaction to dispute", "small")
disputeForm = Form("dispute-transaction", disputeButtons, [disputeTxnField, disputeReasonField, disputeDetailsField])
disputeTxnField = FormControl("Transaction", disputeTxnSelect)
disputeTxnSelect = Select("dispute_txn", [disputeTxn1, disputeTxn2, disputeTxn3, disputeTxn4, disputeTxn5], "Choose a transaction")
disputeTxn1 = SelectItem("txn_1", "Whole Foods Market • -$87.42 • Jan 15")
disputeTxn2 = SelectItem("txn_2", "Shell Gas Station • -$45.00 • Jan 14")
disputeTxn3 = SelectItem("txn_3", "Amazon.com • -$124.99 • Jan 13")
disputeTxn4 = SelectItem("txn_4", "Netflix • -$15.99 • Jan 12")
disputeTxn5 = SelectItem("txn_5", "Uber Ride • -$22.50 • Jan 11")
disputeReasonField = FormControl("Reason", disputeReasonSelect)
disputeReasonSelect = Select("dispute_reason", [reasonUnauthorized, reasonIncorrect, reasonDuplicate, reasonNotReceived, reasonOther], "Select reason")
reasonUnauthorized = SelectItem("unauthorized", "Unauthorized charge")
reasonIncorrect = SelectItem("incorrect", "Incorrect amount")
reasonDuplicate = SelectItem("duplicate", "Duplicate charge")
reasonNotReceived = SelectItem("not_received", "Goods/services not received")
reasonOther = SelectItem("other", "Other")
disputeDetailsField = FormControl("Additional Details", disputeDetailsTextarea, "Optional: provide more context")
disputeDetailsTextarea = TextArea("dispute_details", "Describe what happened…", 4)
disputeButtons = Buttons([disputeSubmitBtn, disputeCancelBtn])
disputeSubmitBtn = Button("Submit Dispute", null, "primary")
disputeCancelBtn = Button("Cancel", null, "tertiary")