(defcomp
  ()
  (~docs/page
    :title "React Feature Coverage"
    (p
      "Every React feature has an SX equivalent — most are simpler because signals are fine-grained.")
    (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")
            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "React")
            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "SX")
            (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") "Demo")))
        (tbody
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "useState")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(signal value)")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#1"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "useMemo")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(computed (fn () ...))")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#1, #2"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "useEffect")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(effect (fn () ...))")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#3"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "useRef")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(dict \"current\" nil) + :ref")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#9"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "useCallback")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(fn (...) ...) — no dep arrays")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "N/A"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "className / style")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              ":class (str ...) :style (str ...)")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#10"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Controlled inputs")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              ":bind signal")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#6"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "key prop")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              ":key value")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#5"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "createPortal")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(portal \"#target\" ...)")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#7"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "ErrorBoundary")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(error-boundary fallback ...)")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#8"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Suspense + use()")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "(resource fn) + cond/deref")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#11"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "startTransition")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "schedule-idle + batch")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#12"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Context / Redux")
            (td
              (~tw :tokens "px-3 py-2 font-mono text-xs text-violet-700")
              "def-store / use-store")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "#13"))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Virtual DOM / diffing")
            (td
              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
              "N/A — fine-grained signals update exact DOM nodes")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "JSX / build step")
            (td
              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
              "N/A — s-expressions are the syntax")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Server Components")
            (td
              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
              "N/A — aser mode already expands server-side")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
          (tr
            (~tw :tokens "border-b border-stone-100")
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Concurrent rendering")
            (td
              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
              "N/A — fine-grained updates are inherently incremental")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") ""))
          (tr
            (td (~tw :tokens "px-3 py-2 text-stone-700") "Hooks rules")
            (td
              (~tw :tokens "px-3 py-2 text-xs text-stone-500")
              "N/A — signals are values, no ordering rules")
            (td (~tw :tokens "px-3 py-2 text-xs text-stone-500") "")))))))
