(defisland
  ()
  (let
    ((price (def-store "demo-price" (fn () (signal 19.99))))
      (qty (signal 1))
      (total (computed (fn () (* (deref price) (deref qty)))))
      (savings
        (computed (fn () (- (* 19.99 (deref qty)) (deref total)))))
      (on-sale? (computed (fn () (< (deref price) 19.99)))))
    (div
      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-4")
      (div
        (~tw :tokens "flex items-center justify-between")
        (div
          (h4 (~tw :tokens "font-semibold text-stone-800") "Artisan Widget")
          (p (~tw :tokens "text-sm text-stone-500") "Hand-crafted by algorithms"))
        (div
          (~tw :tokens "text-right")
          (div
            (~tw :tokens "flex items-center gap-2")
            (when
              (deref on-sale?)
              (span
                (~tw :tokens "px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 text-xs font-bold uppercase")
                "Sale"))
            (span
              (~tw :tokens "text-2xl font-bold text-stone-800")
              "$"
              (deref price)))))
      (div
        (~tw :tokens "flex items-center gap-3")
        (span (~tw :tokens "text-sm text-stone-600") "Qty:")
        (button
          (~tw :tokens "w-7 h-7 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
          :on-click (fn (e) (swap! qty (fn (q) (max 1 (- q 1)))))
          "−")
        (span
          (~tw :tokens "font-mono text-lg font-bold text-violet-900 w-8 text-center")
          (deref qty))
        (button
          (~tw :tokens "w-7 h-7 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
          :on-click (fn (e) (swap! qty inc))
          "+")
        (span (~tw :tokens "ml-4 text-sm text-stone-600") "Total:")
        (span (~tw :tokens "text-lg font-bold text-emerald-700") "$" (deref total))
        (when
          (> (deref savings) 0)
          (span
            (~tw :tokens "text-sm text-rose-600 font-medium ml-2")
            "Save $"
            (deref savings))))
      (div
        (~tw :tokens "border-t border-stone-200 pt-3")
        (div
          (~tw :tokens "flex items-center gap-3")
          (button
            (~tw :tokens "px-4 py-2 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
            :sx-get "/sx/(geography.(reactive.(api.flash-sale)))"
            :sx-target "#marsh-server-msg"
            :sx-swap "innerHTML"
            "Fetch Price from Server")
          (span
            (~tw :tokens "text-xs text-stone-400")
            "Hits a real endpoint. Response updates the signal."))
        (div :id "marsh-server-msg" (~tw :tokens "mt-2 min-h-[2rem]"))))))
