;; ---------------------------------------------------------------------------
;; L6: App Shell — client-side mini-app
;; ---------------------------------------------------------------------------
(defisland ()
  (let ((route (signal "home"))
        (count (signal 0)))
    (div (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
      ;; Client-side nav bar
      (nav (~tw :tokens "flex gap-1 border-b border-stone-200 pb-2 mb-3")
        (button :class (str "px-2 py-1 text-xs rounded "
                  (if (= (deref route) "home")
                    "bg-violet-600 text-white font-medium"
                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
          :on-click (fn (e) (reset! route "home"))
          "Home")
        (button :class (str "px-2 py-1 text-xs rounded "
                  (if (= (deref route) "counter")
                    "bg-violet-600 text-white font-medium"
                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
          :on-click (fn (e) (reset! route "counter"))
          "Counter")
        (button :class (str "px-2 py-1 text-xs rounded "
                  (if (= (deref route) "about")
                    "bg-violet-600 text-white font-medium"
                    "bg-stone-200 text-stone-600 hover:bg-stone-300"))
          :on-click (fn (e) (reset! route "about"))
          "About"))
      ;; Reactive view switching
      (div (~tw :tokens "min-h-24")
        (if (= (deref route) "home")
            (div (~tw :tokens "p-3")
              (h3 (~tw :tokens "font-bold text-stone-800 mb-1") "Home")
              (p (~tw :tokens "text-sm text-stone-600")
                "Client-side rendered. No server round-trip for navigation."))
          (if (= (deref route) "counter")
            (div (~tw :tokens "p-3")
              (h3 (~tw :tokens "font-bold text-stone-800 mb-2") "Counter")
              (div (~tw :tokens "flex items-center gap-3")
                (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
                  :on-click (fn (e) (swap! count dec))
                  "−")
                (span (~tw :tokens "text-2xl font-bold text-violet-900 font-mono w-12 text-center")
                  (deref count))
                (button (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
                  :on-click (fn (e) (swap! count inc))
                  "+"))
              (p (~tw :tokens "text-xs text-stone-400 mt-2")
                "State persists across view switches — signals live in closures."))
            (div (~tw :tokens "p-3")
              (h3 (~tw :tokens "font-bold text-stone-800 mb-1") "About")
              (p (~tw :tokens "text-sm text-stone-600")
                "This mini-app is entirely client-rendered. The server provides only "
                "the component definition and mount point — zero HTML content."))))))))
