(defisland
  ()
  (let
    ((mode (signal "products")) (query (signal "")))
    (div
      (~tw :tokens "rounded-lg border border-stone-200 bg-white p-4 my-4 space-y-3")
      (h4 (~tw :tokens "font-semibold text-stone-800") "Signal-Bound URL Demo")
      (div
        (~tw :tokens "flex gap-2")
        (button
          :class (computed
            (fn
              ()
              (str
                "px-3 py-1.5 rounded text-sm font-medium "
                (if
                  (= (deref mode) "products")
                  "bg-violet-600 text-white"
                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
          :on-click (fn (e) (reset! mode "products"))
          "Products")
        (button
          :class (computed
            (fn
              ()
              (str
                "px-3 py-1.5 rounded text-sm font-medium "
                (if
                  (= (deref mode) "events")
                  "bg-emerald-600 text-white"
                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
          :on-click (fn (e) (reset! mode "events"))
          "Events")
        (button
          :class (computed
            (fn
              ()
              (str
                "px-3 py-1.5 rounded text-sm font-medium "
                (if
                  (= (deref mode) "posts")
                  "bg-amber-600 text-white"
                  "bg-stone-200 text-stone-700 hover:bg-stone-300"))))
          :on-click (fn (e) (reset! mode "posts"))
          "Posts"))
      (div
        (~tw :tokens "flex gap-2")
        (input
          :type "text"
          :bind query
          :placeholder "Search..."
          (~tw :tokens "flex-1 px-3 py-1.5 rounded border border-stone-300 text-sm focus:outline-none focus:border-violet-400"))
        (button
          (~tw :tokens "px-4 py-1.5 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
          :sx-get (computed
            (fn
              ()
              (str
                "/sx/(geography.(reactive.(api.search-"
                (deref mode)
                ")))"
                "?q="
                (deref query))))
          :sx-target "#signal-results"
          :sx-swap "innerHTML"
          "Search"))
      (p
        (~tw :tokens "text-xs text-stone-400 font-mono")
        "URL: "
        (computed
          (fn
            ()
            (str
              "/sx/(geography.(reactive.(api.search-"
              (deref mode)
              ")))"
              "?q="
              (deref query)))))
      (div
        :id "signal-results"
        (~tw :tokens "min-h-[3rem] rounded bg-stone-50 p-2")
        (p
          (~tw :tokens "text-sm text-stone-400 italic")
          "Select a category and search.")))))
