(defcomp
  ()
  (~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.")))))
