-- DreamStack Multi-Page App
-- Client-side routing with hash navigation

import { Card } from "../registry/components/card"
import { Badge } from "../registry/components/badge"

let count = 0
let todos = ["Buy groceries", "Walk the dog"]
let newTodo = ""

-- Navigation bar (shared across all routes)
view nav = row [
  text "🧭 MyApp" { variant: "title" }
  button "🏠 Home" { click: navigate "/", variant: "primary" }
  button "🔢 Counter" { click: navigate "/counter", variant: "secondary" }
  button "📝 Todos" { click: navigate "/todos", variant: "secondary" }
  button "ℹ️ About" { click: navigate "/about", variant: "ghost" }
]

-- Route: Home
route "/" -> column [
  text "🏠 Welcome Home" { variant: "title" }
  text "Navigate using the buttons above" { variant: "subtitle" }
  row [
    Card { title: "Counter", subtitle: "reactive state" } [
      text "Count: {count}" { variant: "title" }
      Badge { label: "LIVE", variant: "success" }
    ]
    Card { title: "Todos", subtitle: "dynamic lists" } [
      Badge { label: "ACTIVE", variant: "info" }
    ]
  ]
]

-- Route: Counter
route "/counter" -> column [
  text "🔢 Counter Page" { variant: "title" }
  text "State persists across route changes" { variant: "subtitle" }
  Card { title: "Interactive Counter", subtitle: "reactive signals" } [
    text "Count: {count}" { variant: "title" }
    row [
      button "+1" { click: count += 1, variant: "primary" }
      button "-1" { click: count -= 1, variant: "secondary" }
      button "Reset" { click: count = 0, variant: "ghost" }
    ]
    when count > 10 -> Badge { label: "HIGH SCORE!", variant: "warning" }
  ]
]

-- Route: Todos
route "/todos" -> column [
  text "📝 Todo List" { variant: "title" }
  text "Add and remove tasks" { variant: "subtitle" }
  Card { title: "My Tasks", subtitle: "dynamic arrays" } [
    row [
      input { bind: newTodo, placeholder: "New task..." }
      button "Add" { click: todos.push(newTodo), variant: "primary" }
    ]
    each todo in todos ->
      row [
        text "→ {todo}"
        button "×" { click: todos.remove(_idx), variant: "ghost" }
      ]
    button "Clear All" { click: todos = [], variant: "ghost" }
  ]
]

-- Route: About
route "/about" -> column [
  text "ℹ️ About DreamStack" { variant: "title" }
  text "The reactive UI language" { variant: "subtitle" }
  Card { title: "Features", subtitle: "all built-in" } [
    text "• Reactive signals with fine-grained updates"
    text "• Component composition with slots"
    text "• Client-side routing (you're using it now!)"
    text "• Dynamic lists with push/remove"
    text "• Pattern matching expressions"
    text "• When/else branching"
    text "• Two-way data binding"
  ]
]