root = Card([header, statusSection, etaSection, currentLocation, timelineSection, progressSection, reportSection, helpSection])
header = CardHeader("Track your delivery", "Order #48291-7")
statusSection = Card([statusTitle, statusBadge, statusText], "sunk")
statusTitle = Heading("Current status", "h3")
statusBadge = Tag("Out for delivery", null, "md", "info")
statusText = TextContent("Your package is on the final leg of its journey and should arrive today.", "default")
etaSection = Card([etaTitle, etaDate, etaRange], "sunk")
etaTitle = Heading("Estimated delivery", "h3")
etaDate = TextContent("**Today, June 14**", "large-heavy")
etaRange = TextContent("Arriving between **2:00 PM – 4:00 PM**", "default")
currentLocation = Card([locationTitle, locationText, locationBadge], "sunk")
locationTitle = Heading("Where it is right now", "h3")
locationBadge = Badge("Live", "outline")
locationText = TextContent("**Bloomington, IN** — Departed the local distribution center and is on the truck headed to you.", "default")
timelineSection = Card([timelineTitle, timelineList], "sunk")
timelineTitle = Heading("Journey so far", "h3")
timelineList = ListBlock([step1, step2, step3, step4], "number")
step1 = ListItem("Order placed", "June 11, 9:42 AM")
step2 = ListItem("Picked up by carrier", "June 12, 3:15 PM")
step3 = ListItem("Arrived at regional hub", "June 13, 8:05 AM")
step4 = ListItem("Out for delivery", "June 14, 7:30 AM")
progressSection = Card([progressTitle, progressBar, progressLabel], "sunk")
progressTitle = Heading("Delivery progress", "h3")
progressBar = Progress(85, "85% complete")
progressLabel = TextContent("Your package is 3 stops away on the delivery route.", "small")
reportSection = Card([reportTitle, reportText, reportForm], "sunk")
reportTitle = Heading("Report a problem", "h3")
reportText = TextContent("Having trouble with this delivery? Let us know and we'll look into it right away.", "default")
reportForm = Form("report-issue", reportButtons, [issueField, detailsField])
issueField = FormControl("What's the issue?", issueSelect)
issueSelect = Select("issue_type", [issueLate, issueDamaged, issueMissing, issueWrong], "Choose an issue")
issueLate = SelectItem("late", "It's late / won't arrive on time")
issueDamaged = SelectItem("damaged", "Package arrived damaged")
issueMissing = SelectItem("missing", "Package is missing")
issueWrong = SelectItem("wrong", "Wrong item delivered")
detailsField = FormControl("Tell us more", detailsArea, "Optional details help us resolve faster")
detailsArea = TextArea("details", "Describe what happened...", 4)
reportButtons = Buttons([submitBtn])
submitBtn = Button("Submit report", null, "primary")
helpSection = Card([helpTitle, helpText, helpButtons], "sunk")
helpTitle = Heading("Need more help?", "h3")
helpText = TextContent("Our support team is available 24/7 to assist you with any delivery concerns.", "default")
helpButtons = Buttons([callBtn, chatBtn])
callBtn = Button("Call support", null, "secondary")
chatBtn = Button("Start live chat", null, "secondary")