;; page-helpers-demo.sx — Demo: same SX spec functions on server and client
;;
;; Shows page-helpers.sx functions running on Python (server-side, via sx_ref.py)
;; and JavaScript (client-side, via sx-browser.js) with identical results.
;; Server renders with render-to-html. Client runs as a defisland — pure SX,
;; no JavaScript file. The button click triggers spec functions via signals.
;; ---------------------------------------------------------------------------
;; Shared card component — used by both server and client results
;; ---------------------------------------------------------------------------
(defcomp (&key (title :as string) (ms :as number) (desc :as string) (theme :as string) &rest children)
  (let ((border (if (= theme "blue") "border-blue-200 bg-blue-50/30" "border-stone-200"))
        (title-c (if (= theme "blue") "text-blue-700" "text-stone-700"))
        (badge-c (if (= theme "blue") "text-blue-400" "text-stone-400"))
        (desc-c  (if (= theme "blue") "text-blue-500" "text-stone-500"))
        (body-c  (if (= theme "blue") "text-blue-600" "text-stone-600")))
    (div :class (str "rounded-lg border p-4 " border)
      (h4 :class (str "font-semibold text-sm mb-1 " title-c)
        title " "
        (span :class (str "text-xs " badge-c) (str ms "ms")))
      (p :class (str "text-xs mb-2 " desc-c) desc)
      (div :class (str "text-xs space-y-0.5 " body-c)
        children))))
