root = Card([header, balancesSection, transactionsSection, spendingSection, billsSection, goalSection, creditSection, moveMoneySection, freezeSection, statementSection, alertsSection, disputeSection])

header = CardHeader("Personal Banking", "Welcome back, Alex")

balancesSection = Card([balancesHeading, balancesTable], "sunk")
balancesHeading = Heading("Account Balances", "h2")
balancesTable = Table([accountCol, balanceCol])
accountCol = Col("Account", ["Checking", "Savings", "Credit"])
balanceCol = Col("Balance", ["$4,250.10", "$12,780.55", "$1,340.22"])

transactionsSection = Card([transactionsHeading, transactionsTable], "sunk")
transactionsHeading = Heading("Recent Transactions", "h2")
transactionsTable = Table([merchantCol, amountCol])
merchantCol = Col("Merchant", ["Whole Foods", "Netflix", "Shell", "Starbucks"])
amountCol = Col("Amount", ["-$82.40", "-$15.99", "-$48.20", "-$6.75"])

spendingSection = Card([spendingHeading, spendingChart], "sunk")
spendingHeading = Heading("Spending by Category (This Month)", "h2")
spendingChart = PieChart(["Groceries", "Transport", "Entertainment", "Dining", "Utilities"], [320, 180, 95, 140, 210], "donut")

billsSection = Card([billsHeading, billsTable], "sunk")
billsHeading = Heading("Bills Due Soon", "h2")
billsTable = Table([billCol, dueCol, amountDueCol])
billCol = Col("Bill", ["Electricity", "Internet", "Rent"])
dueCol = Col("Due", ["Mar 5", "Mar 8", "Mar 1"])
amountDueCol = Col("Amount", ["$95.00", "$60.00", "$1,200.00"])

goalSection = Card([goalHeading, goalProgress, goalText], "sunk")
goalHeading = Heading("Vacation Savings Goal", "h2")
goalProgress = Progress(68, "$6,800 of $10,000 saved")
goalText = TextContent("You're 68% of the way to your dream vacation!")

creditSection = Card([creditHeading, creditScore, creditText], "sunk")
creditHeading = Heading("Credit Score", "h2")
creditScore = Badge("742 - Good", "default")
creditText = TextContent("Your score improved by 12 points this month.")

moveMoneySection = Card([moveMoneyHeading, moveMoneyForm], "sunk")
moveMoneyHeading = Heading("Move Money", "h2")
moveMoneyForm = Form("transfer", transferButtons, [fromField, toField, amountField])
fromField = FormControl("From", fromSelect)
fromSelect = Select("from", [fromChecking, fromSavings], "Select account")
fromChecking = SelectItem("checking", "Checking")
fromSavings = SelectItem("savings", "Savings")
toField = FormControl("To", toSelect)
toSelect = Select("to", [toChecking, toSavings], "Select account")
toChecking = SelectItem("checking", "Checking")
toSavings = SelectItem("savings", "Savings")
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "Enter amount", "number")
transferButtons = Buttons([transferBtn])
transferBtn = Button("Transfer", null, "primary")

freezeSection = Card([freezeHeading, freezeButtons], "sunk")
freezeHeading = Heading("Credit Line Management", "h2")
freezeButtons = Buttons([freezeBtn, unfreezeBtn])
freezeBtn = Button("Freeze Credit Line", null, "secondary")
unfreezeBtn = Button("Unfreeze Credit Line", null, "tertiary")

statementSection = Card([statementHeading, statementSelect], "sunk")
statementHeading = Heading("Statement Period", "h2")
statementSelect = Select("statement_period", [periodJan, periodFeb, periodMar], "Pick a period")
periodJan = SelectItem("jan", "January 2025")
periodFeb = SelectItem("feb", "February 2025")
periodMar = SelectItem("mar", "March 2025")

alertsSection = Card([alertsHeading, alertsCheckbox], "sunk")
alertsHeading = Heading("Alert Triggers", "h2")
alertsCheckbox = CheckBoxGroup("alerts", [alertLowBalance, alertLargePurchase, alertLogin])
alertLowBalance = CheckBoxItem("Low balance", "Notify when balance falls below $100", "low_balance", true)
alertLargePurchase = CheckBoxItem("Large purchase", "Notify for purchases over $500", "large_purchase", true)
alertLogin = CheckBoxItem("New login", "Notify on new device login", "login", false)

disputeSection = Card([disputeHeading, disputeDialog], "sunk")
disputeHeading = Heading("Dispute a Transaction", "h2")
disputeDialog = DialogBlock("Dispute Transaction", "Dispute a Transaction", "Select a transaction to dispute", [disputeText, disputeForm])
disputeText = TextContent("Choose the transaction you'd like to dispute and provide a reason.")
disputeForm = Form("dispute", disputeButtons, [disputeSelectField, disputeReasonField])
disputeSelectField = FormControl("Transaction", disputeSelect)
disputeSelect = Select("transaction", [disputeWholeFoods, disputeNetflix], "Select transaction")
disputeWholeFoods = SelectItem("wholefoods", "Whole Foods - $82.40")
disputeNetflix = SelectItem("netflix", "Netflix - $15.99")
disputeReasonField = FormControl("Reason", disputeTextArea)
disputeTextArea = TextArea("reason", "Explain the issue", 4)
disputeButtons = Buttons([disputeSubmit])
disputeSubmit = Button("Submit Dispute", null, "primary")
