(defisland
  ()
  (let
    ((price (def-store "demo-price" (fn () (signal 19.99)))))
    (div
      (~tw :tokens "rounded-lg border border-amber-200 bg-amber-50 p-4")
      (div
        (~tw :tokens "flex items-center justify-between mb-3")
        (div
          (~tw :tokens "flex items-center gap-2")
          (span
            (~tw :tokens "text-sm font-semibold text-amber-800")
            "Island A: Price Control")
          (span
            (~tw :tokens "text-xs bg-amber-200 text-amber-700 px-1.5 py-0.5 rounded font-mono")
            "def-store"))
        (span (~tw :tokens "text-2xl font-bold text-stone-800") "$" (deref price)))
      (div
        (~tw :tokens "flex flex-wrap gap-2")
        (button
          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
          :on-click (fn (e) (reset! price 14.99))
          "⚡$14.99")
        (button
          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
          :on-click (fn (e) (reset! price 9.99))
          "⚡$9.99")
        (button
          (~tw :tokens "px-3 py-1.5 rounded bg-rose-500 text-white text-sm font-medium hover:bg-rose-600")
          :on-click (fn (e) (reset! price 29.99))
          "⚡$29.99")
        (button
          (~tw :tokens "px-3 py-1.5 rounded bg-stone-300 text-stone-700 text-sm font-medium hover:bg-stone-400")
          :on-click (fn (e) (reset! price 19.99))
          "Reset $19.99"))
      (p
        (~tw :tokens "text-xs text-amber-600 mt-2")
        "Each button calls "
        (code "(reset! price ...)")
        " — simulating "
        (code "data-sx-signal")
        " during morph."))))
