-- DreamStack Full App Demo
-- Combines: each loops, variant props, container variants, reactive state

let tasks = ["Design landing page", "Build API endpoints", "Write unit tests", "Deploy to staging", "Code review PR #42"]
let done = ["Set up CI/CD", "Create database schema", "Auth integration"]
let total = 8
let completed = 3
let search = ""
let tab = "active"

view main = column [

  -- Header
  row [
    text "🏗️ Project Tracker" { variant: "title" }
    input { bind: search, placeholder: "Search tasks..." }
  ]
  text "Track your sprint progress" { variant: "subtitle" }

  -- Progress stats
  row [
    column [
      text "Active" { variant: "subtitle" }
      text "5" { variant: "title" }
      text "In progress" { variant: "warning" }
    ] { variant: "card" }

    column [
      text "Completed" { variant: "subtitle" }
      text "3" { variant: "title" }
      text "✓ Done" { variant: "success" }
    ] { variant: "card" }

    column [
      text "Total" { variant: "subtitle" }
      text "8" { variant: "title" }
      text "37.5% complete" { variant: "info" }
    ] { variant: "card" }
  ]

  -- Active tasks
  column [
    text "📋 Active Tasks" { variant: "title" }

    each task in tasks ->
      row [
        text "○"
        text task
        text "TODO" { variant: "warning" }
      ]
  ] { variant: "card" }

  -- Completed tasks
  column [
    text "✅ Completed" { variant: "title" }

    each item in done ->
      row [
        text "✓"
        text item
        text "DONE" { variant: "success" }
      ]
  ] { variant: "card" }

  -- Actions
  row [
    button "Add Task" { variant: "primary" }
    button "Export" { variant: "secondary" }
    button "Archive" { variant: "ghost" }
    button "Delete All" { variant: "destructive" }
  ]
]