(defcomp
  ~examples/page-content
  (&key
    (title :as string)
    (description :as string)
    (demo-description :as string?)
    demo
    (sx-code :as string)
    (sx-lang :as string?)
    (handler-names :as list)
    (handler-lang :as string?)
    (comp-placeholder-id :as string?)
    (wire-placeholder-id :as string?)
    (wire-note :as string?)
    (comp-heading :as string?)
    (handler-heading :as string?))
  (~docs/page
    :title title
    (p (~tw :tokens "text-stone-600 mb-6") description)
    (error-boundary
      (~examples/card
        :title "Demo"
        :description demo-description
        (~examples/demo demo)))
    (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3") "S-expression")
    (error-boundary
      (~examples/source
        :src-code (highlight sx-code (if sx-lang sx-lang "lisp"))))
    (when
      comp-placeholder-id
      (<>
        (h3
          (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3")
          (if comp-heading comp-heading "Component"))
        (error-boundary (~docs/placeholder :id comp-placeholder-id))))
    (h3
      (~tw :tokens "text-lg font-semibold text-stone-700 mt-8 mb-3")
      (if handler-heading handler-heading "Server handler"))
    (error-boundary
      (~examples/source
        :src-code (highlight
          (join "\n\n" (map handler-source handler-names))
          (if handler-lang handler-lang "sx"))))
    (div
      (~tw :tokens "flex items-center justify-between mt-6")
      (h3 (~tw :tokens "text-lg font-semibold text-stone-700") "Wire response")
      (~docs/clear-cache-btn))
    (when wire-note (p (~tw :tokens "text-stone-500 text-sm mb-2") wire-note))
    (when
      wire-placeholder-id
      (error-boundary (~docs/placeholder :id wire-placeholder-id)))))

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