(defcomp
  ~reference/attrs-content
  (&key req-table beh-table uniq-table)
  (~docs/page
    :title "Attribute Reference"
    (p
      :class "text-stone-600 mb-6"
      "sx attributes mirror htmx where possible. This table shows all available attributes and their status.")
    (div :class "space-y-8" req-table beh-table uniq-table)))

(defcomp
  ~reference/headers-content
  (&key req-table resp-table)
  (~docs/page
    :title "Headers"
    (p
      :class "text-stone-600 mb-6"
      "sx uses custom HTTP headers to coordinate between client and server.")
    (div :class "space-y-8" req-table resp-table)))

(defcomp
  ~reference/events-content
  (&key table)
  (~docs/page
    :title "Events"
    (p
      :class "text-stone-600 mb-6"
      "sx fires custom DOM events at various points in the request lifecycle. "
      "Listen for them with sx-on:* attributes or addEventListener. "
      "Client-side routing fires sx:clientRoute instead of request lifecycle events.")
    table))

(defcomp
  ~reference/js-api-content
  (&key table)
  (~docs/page :title "JavaScript API" table))

(defcomp
  ~reference/attr-detail-content
  (&key
    (title :as string)
    (description :as string)
    demo
    (example-code :as string)
    (handler-code :as string?)
    (wire-placeholder-id :as string?))
  (~docs/page
    :title title
    (p :class "text-stone-600 mb-6" description)
    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
    (h3 :class "text-lg font-semibold text-stone-700 mt-6" "S-expression")
    (~examples/source :src-code (highlight example-code "lisp"))
    (when
      handler-code
      (<>
        (h3
          :class "text-lg font-semibold text-stone-700 mt-6"
          "Server handler")
        (~examples/source :src-code (highlight handler-code "lisp"))))
    (when
      wire-placeholder-id
      (<>
        (h3 :class "text-lg font-semibold text-stone-700 mt-6" "Wire response")
        (p
          :class "text-stone-500 text-sm mb-2"
          "Trigger the demo to see the raw response the server sends.")
        (~docs/placeholder :id wire-placeholder-id)))))

(defcomp
  ~reference/header-detail-content
  (&key
    (title :as string)
    (direction :as string)
    (description :as string)
    (example-code :as string?)
    demo)
  (~docs/page
    :title title
    (let
      ((badge-class (if (= direction "request") "bg-blue-100 text-blue-700" (if (= direction "response") "bg-emerald-100 text-emerald-700" "bg-amber-100 text-amber-700")))
        (badge-label
          (if
            (= direction "request")
            "Request Header"
            (if
              (= direction "response")
              "Response Header"
              "Request & Response"))))
      (div
        :class "flex items-center gap-3 mb-4"
        (span
          :class (str "text-xs font-medium px-2 py-1 rounded " badge-class)
          badge-label)))
    (p :class "text-stone-600 mb-6" description)
    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
    (when
      example-code
      (<>
        (h3 :class "text-lg font-semibold text-stone-700 mt-6" "Example usage")
        (~examples/source :src-code (highlight example-code "lisp"))))))

(defcomp
  ~reference/event-detail-content
  (&key title description example-code demo)
  (~docs/page
    :title title
    (p :class "text-stone-600 mb-6" description)
    (when demo (~examples/card :title "Demo" (~examples/demo demo)))
    (when
      example-code
      (<>
        (h3 :class "text-lg font-semibold text-stone-700 mt-6" "Example usage")
        (~examples/source :src-code (highlight example-code "lisp"))))))

(defcomp
  ~reference/attr-not-found
  (&key (slug :as string))
  (~docs/page
    :title "Not Found"
    (p :class "text-stone-600" (str "No documentation found for \"" slug "\"."))))