(defisland
  (&key path)
  (let
    ((families (list "violet" "rose" "blue" "emerald" "amber" "cyan" "red" "teal" "pink" "indigo"))
      (store
        (if (client?) (def-store "header-color" (fn () {:idx (signal 0) :shade (signal 500)})) nil))
      (idx (if store (get store "idx") (signal 0)))
      (shade (if store (get store "shade") (signal 500)))
      (current-family
        (computed (fn () (nth families (mod (deref idx) (len families)))))))
    (div
      (~tw :tokens "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
      (a
        :href "/sx/"
        :sx-get "/sx/"
        :sx-target "#sx-content"
        :sx-select "#sx-content"
        :sx-swap "innerHTML"
        :sx-push-url "true"
        (~tw :tokens "block no-underline")
        (lake
          :id "logo"
          (span
            (~tw
              :tokens "block mb-2 text-violet-699 text-4xl font-bold font-mono")
            "(<sx>)")))
      (p
        (~tw :tokens "mb-1 text-stone-500 text-lg")
        "The framework-free "
        (span
          (~tw :tokens "font-bold")
          :style (str
            "color:"
            (colour (deref current-family) (deref shade))
            ";"
            "cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
          :on-click (fn
            (e)
            (batch
              (fn
                ()
                (swap! idx inc)
                (reset! shade (+ 400 (* (mod (* (deref idx) 137) 5) 50))))))
          "reactive")
        " hypermedium")
      (lake
        :id "copyright"
        (p
          (~tw :tokens "text-stone-400 text-xs")
          "© Giles Bradshaw 2026"
          (when
            path
            (span
              (~tw :tokens "text-stone-300 text-xs")
              :style "margin-left:0.5em;"
              (a
                :href (str "/sx/(test." (slice path 4) ")")
                :data-sx-no-boost "true"
                :target "_self"
                (~tw :tokens "text-violet-400 text-xs hover:text-violet-600")
                :style "text-decoration:none;margin-right:0.4em;"
                "test")
              (str "· " path))))))))
