(defisland
  ()
  (let
    ((count (def-store "settle-count" (fn () (signal 0)))))
    (div
      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
      (div
        (~tw :tokens "flex items-center justify-between")
        (div
          (h4 (~tw :tokens "font-semibold text-stone-800") "Settle Hook Demo")
          (p
            (~tw :tokens "text-sm text-stone-500")
            "Server content + client-side counter"))
        (div
          (~tw :tokens "text-right")
          (span (~tw :tokens "text-sm text-stone-600") "Fetched: ")
          (span (~tw :tokens "text-2xl font-bold text-violet-700") (deref count))
          (span (~tw :tokens "text-sm text-stone-600") " times")))
      (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.settle-data)))"
          :sx-target "#settle-result"
          :sx-swap "innerHTML"
          :sx-on-settle "(swap! (use-store \"settle-count\") inc)"
          "Fetch Item")
        (button
          (~tw :tokens "px-3 py-1.5 rounded bg-stone-200 text-stone-700 text-sm font-medium hover:bg-stone-300")
          :on-click (fn (e) (reset! count 0))
          "Reset Counter"))
      (div
        :id "settle-result"
        (~tw :tokens "min-h-[2rem] rounded bg-stone-50 p-2")
        (p (~tw :tokens "text-sm text-stone-400 italic") "Nothing fetched yet.")))))
