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

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

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

(defcomp
  ~docs/code
  (&key src)
  (div
    (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 overflow-x-auto my-6")
    (pre
      (~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono")
      src)))

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

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

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

(defcomp
  ~docs/primitives-table
  (&key category primitives)
  (div
    (~tw :tokens "space-y-2")
    (h4 (~tw :tokens "text-lg font-semibold text-stone-700") category)
    (div
      (~tw :tokens "flex flex-wrap gap-2")
      (map
        (fn
          (p)
          (span
            (~tw :tokens "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
    (~tw :tokens "flex flex-wrap gap-2 mb-8")
    (map
      (fn
        (item)
        (a
          :href (nth item 1)
          :sx-get (nth item 1)
          :sx-target "#sx-content"
          :sx-select "#sx-content"
          :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)))