root = Card([header, statusCard, deliveryCard, problemSection])
header = CardHeader("Package Tracking", "Order #ORD-2024-089234")
statusCard = Card([statusHeader, currentLocation, statusTimeline], "sunk", "column", "m")
statusHeader = Heading("Current Status", "h3")
currentLocation = TextContent("📦 **Out for Delivery** — Your package is on the delivery vehicle and will be delivered today.", "default")
statusTimeline = Card([timelineItem1, timelineItem2, timelineItem3, timelineItem4], "clear", "column", "s")
timelineItem1 = TextContent("✅ **Order Placed** — Aug 12, 2024 10:30 AM", "small")
timelineItem2 = TextContent("✅ **Processing** — Aug 12, 2024 2:15 PM", "small")
timelineItem3 = TextContent("✅ **Shipped** — Aug 13, 2024 8:00 AM", "small")
timelineItem4 = TextContent("🔄 **Out for Delivery** — Aug 14, 2024 7:30 AM", "small-heavy")
deliveryCard = Card([deliveryHeader, deliveryDate, deliveryWindow], "sunk", "column", "m")
deliveryHeader = Heading("Estimated Delivery", "h3")
deliveryDate = TextContent("**Wednesday, August 14, 2024**", "large-heavy")
deliveryWindow = TextContent("Between **12:00 PM – 3:00 PM**", "default")
problemSection = Card([problemHeader, problemText, problemButton], "clear", "column", "m")
problemHeader = Heading("Need Help?", "h3")
problemText = TextContent("If your package is late, damaged, or you have any other issue with this delivery, let us know.", "default")
problemButton = Buttons([reportBtn], "row")
reportBtn = Button("Report a Problem", null, "primary")
reportDialog = DialogBlock("Report a Problem", "Report a Delivery Issue", "Describe the problem you're experiencing with this delivery. We'll investigate and get back to you within 24 hours.", [problemForm], "default")
problemForm = Form("delivery-issue", formButtons, [issueTypeField, descriptionField, photoField])
issueTypeField = FormControl("Issue Type", issueSelect, "Select the type of problem")
issueSelect = Select("issue_type", [issueLate, issueDamaged, issueMissing, issueWrong, issueOther], "Choose an issue type")
issueLate = SelectItem("late", "Package is late")
issueDamaged = SelectItem("damaged", "Package arrived damaged")
issueMissing = SelectItem("missing", "Package not received")
issueWrong = SelectItem("wrong", "Wrong item received")
issueOther = SelectItem("other", "Other issue")
descriptionField = FormControl("Description", descriptionInput, "Please provide details about the issue")
descriptionInput = TextArea("description", "Describe what happened...", 4)
photoField = FormControl("Attach Photos (Optional)", photoInput, "Add up to 3 photos of the issue")
photoInput = Input("photos", "No file chosen", "text")
formButtons = Buttons([submitBtn, cancelBtn], "row")
submitBtn = Button("Submit Report", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")