;; Example page template and reference index
;; Template receives data values (code strings, titles), calls highlight internally.

(defcomp ~example-page-content (&key title description demo-description demo
    sx-code sx-lang handler-code handler-lang
    comp-placeholder-id wire-placeholder-id wire-note
    comp-heading handler-heading)
  (~doc-page :title title
    (p :class "text-stone-600 mb-6" description)
    (~example-card :title "Demo" :description demo-description
      (~example-demo demo))
    (h3 :class "text-lg font-semibold text-stone-700 mt-6" "S-expression")
    (~example-source :code (highlight sx-code (if sx-lang sx-lang "lisp")))
    (when comp-placeholder-id
      (<>
        (h3 :class "text-lg font-semibold text-stone-700 mt-6"
          (if comp-heading comp-heading "Component"))
        (~doc-placeholder :id comp-placeholder-id)))
    (h3 :class "text-lg font-semibold text-stone-700 mt-6"
      (if handler-heading handler-heading "Server handler"))
    (~example-source :code (highlight handler-code (if handler-lang handler-lang "python")))
    (div :class "flex items-center justify-between mt-6"
      (h3 :class "text-lg font-semibold text-stone-700" "Wire response")
      (~doc-clear-cache-btn))
    (when wire-note
      (p :class "text-stone-500 text-sm mb-2" wire-note))
    (when wire-placeholder-id
      (~doc-placeholder :id wire-placeholder-id))))

(defcomp ~reference-index-content ()
  (~doc-page :title "Reference"
    (p :class "text-stone-600 mb-6"
      "Complete reference for the sx client library.")
    (div :class "grid gap-4 sm:grid-cols-2"
      (a :href "/reference/attributes"
        :sx-get "/reference/attributes" :sx-target "#main-panel" :sx-select "#main-panel"
        :sx-swap "outerHTML" :sx-push-url "true"
        :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
        (h3 :class "text-lg font-semibold text-violet-700 mb-1" "Attributes")
        (p :class "text-stone-600 text-sm" "All sx attributes — request verbs, behavior modifiers, and sx-unique features."))
      (a :href "/reference/headers"
        :sx-get "/reference/headers" :sx-target "#main-panel" :sx-select "#main-panel"
        :sx-swap "outerHTML" :sx-push-url "true"
        :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
        (h3 :class "text-lg font-semibold text-violet-700 mb-1" "Headers")
        (p :class "text-stone-600 text-sm" "Custom HTTP headers used to coordinate between the sx client and server."))
      (a :href "/reference/events"
        :sx-get "/reference/events" :sx-target "#main-panel" :sx-select "#main-panel"
        :sx-swap "outerHTML" :sx-push-url "true"
        :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
        (h3 :class "text-lg font-semibold text-violet-700 mb-1" "Events")
        (p :class "text-stone-600 text-sm" "DOM events fired during the sx request lifecycle."))
      (a :href "/reference/js-api"
        :sx-get "/reference/js-api" :sx-target "#main-panel" :sx-select "#main-panel"
        :sx-swap "outerHTML" :sx-push-url "true"
        :class "block p-5 rounded-lg border border-stone-200 hover:border-violet-300 hover:shadow-sm transition-all no-underline"
        (h3 :class "text-lg font-semibold text-violet-700 mb-1" "JS API")
        (p :class "text-stone-600 text-sm" "JavaScript functions for parsing, evaluating, and rendering s-expressions.")))))