;; SX docs — documentation page components

(defcomp ~docs/page (&key title &rest children)
  (div :class "max-w-4xl mx-auto px-6 py-8"
    (div :class "prose prose-stone max-w-none space-y-6" children)))

(defcomp ~docs/section (&key title id &rest children)
  (section :id id :class "space-y-4"
    (h2 :class "text-2xl font-semibold text-stone-800" title)
    children))

(defcomp ~docs/subsection (&key title &rest children)
  (div :class "space-y-3"
    (h3 :class "text-xl font-semibold text-stone-700" title)
    children))

(defcomp ~docs/code (&key code)
  (div :class "not-prose bg-stone-100 rounded-lg p-5 mx-auto max-w-3xl"
    (pre :class "text-sm leading-relaxed whitespace-pre-wrap break-words" (code code))))

(defcomp ~docs/note (&key &rest children)
  (div :class "border-l-4 border-violet-400 bg-violet-50 p-4 text-stone-700 text-sm"
    children))

(defcomp ~docs/table (&key headers rows)
  (div :class "overflow-x-auto rounded border border-stone-200"
    (table :class "w-full text-left text-sm"
      (thead
        (tr :class "border-b border-stone-200 bg-stone-100"
          (map (fn (h) (th :class "px-3 py-2 font-medium text-stone-600" h)) headers)))
      (tbody
        (map (fn (row)
          (tr :class "border-b border-stone-100"
            (map (fn (cell) (td :class "px-3 py-2 text-stone-700" cell)) row)))
          rows)))))

(defcomp ~docs/attr-row (&key attr description exists href)
  (tr :class "border-b border-stone-100"
    (td :class "px-3 py-2 font-mono text-sm whitespace-nowrap"
      (if href
        (a :href href
           :sx-get href :sx-target "#main-panel" :sx-select "#main-panel"
           :sx-swap "outerHTML" :sx-push-url "true"
           :class "text-violet-700 hover:text-violet-900 underline" attr)
        (span :class "text-violet-700" attr)))
    (td :class "px-3 py-2 text-stone-700 text-sm" description)
    (td :class "px-3 py-2 text-center"
      (if exists
        (span :class "text-emerald-600 text-sm" "yes")
        (span :class "text-stone-400 text-sm italic" "not yet")))))

(defcomp ~docs/primitives-table (&key category primitives)
  (div :class "space-y-2"
    (h4 :class "text-lg font-semibold text-stone-700" category)
    (div :class "flex flex-wrap gap-2"
      (map (fn (p)
        (span :class "inline-block px-2 py-1 rounded bg-stone-100 font-mono text-sm text-stone-700" p))
        primitives))))

(defcomp ~docs/nav (&key items current)
  (nav :class "flex flex-wrap gap-2 mb-8"
    (map (fn (item)
      (a :href (nth item 1)
         :sx-get (nth item 1)
         :sx-target "#main-panel"
         :sx-select "#main-panel"
         :sx-swap "outerHTML"
         :sx-push-url "true"
         :class (str "px-3 py-1.5 rounded text-sm font-medium no-underline "
                     (if (= (nth item 0) current)
                       "bg-violet-100 text-violet-800"
                       "bg-stone-100 text-stone-600 hover:bg-stone-200"))
        (nth item 0)))
      items)))