;; Reactive Expressions demo — compound expressions with deref auto-track signals.
(defisland ()
  (let ((celsius (signal 20))
        (name (signal "World")))
    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50/30 p-4 space-y-4")
      (div (~tw :tokens "space-y-3")
        (div (~tw :tokens "flex items-center gap-3")
          (span (~tw :tokens "text-sm text-stone-600") "Celsius:")
          (button (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-sm hover:bg-stone-300")
            :on-click (fn (e) (swap! celsius (fn (c) (- c 5)))) "−5")
          (span (~tw :tokens "font-mono text-lg font-bold text-violet-700") (deref celsius))
          (button (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-sm hover:bg-stone-300")
            :on-click (fn (e) (swap! celsius (fn (c) (+ c 5)))) "+5"))

        ;; All of these are reactive — they update when celsius changes
        (div (~tw :tokens "space-y-1 text-sm")
          (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Bare deref: ") (span (~tw :tokens "font-mono text-violet-700") (deref celsius)))
          (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "str + deref: ") (span (~tw :tokens "font-mono text-violet-700") (str (deref celsius) "°C")))
          (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Math + deref: ") (span (~tw :tokens "font-mono text-violet-700") (+ (* (deref celsius) 1.8) 32)))
          (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Full conversion: ") (span (~tw :tokens "font-mono text-violet-700") (str (deref celsius) "°C = " (+ (* (deref celsius) 1.8) 32) "°F")))
          (div (span (~tw :tokens "text-stone-500 w-32 inline-block") "Conditional: ") (span (~tw :tokens "font-mono text-violet-700") (if (> (deref celsius) 30) "Hot!" (if (< (deref celsius) 0) "Freezing!" "Moderate")))))))))
