;; SX docs — home page components


(defcomp ~home/hero (&key &rest children)
  (div (~tw :tokens "max-w-4xl mx-auto px-6 py-16 text-center")
    (h1 (~tw :tokens "text-5xl font-bold text-stone-900 mb-4")
      (span (~tw :tokens "text-violet-600 font-mono") "(<sx>)"))
    (p (~tw :tokens "text-2xl text-stone-600 mb-4")
      "The framework-free reactive hypermedium")
    (p (~tw :tokens "text-sm text-stone-400")
      "© Giles Bradshaw 2026")
    (p (~tw :tokens "text-lg text-stone-500 max-w-2xl mx-auto mb-12")
      "(sx === code === data === protocol === content === behaviour === layout === style === spec === sx)")
    (div (~tw :tokens "bg-stone-100 rounded-lg p-6 text-left font-mono text-sm mx-auto max-w-2xl")
      (pre (~tw :tokens "leading-relaxed whitespace-pre-wrap") children))))

(defcomp ~home/philosophy ()
  (div (~tw :tokens "max-w-4xl mx-auto px-6 py-12")
    (h2 (~tw :tokens "text-3xl font-bold text-stone-900 mb-8") "Design philosophy")
    (div (~tw :tokens "grid md:grid-cols-2 gap-8")
      (div (~tw :tokens "space-y-4")
        (h3 (~tw :tokens "text-xl font-semibold text-violet-700") "From htmx")
        (ul (~tw :tokens "space-y-2 text-stone-600")
          (li "Server-rendered DOM over the wire (no HTML)")
          (li "Hypermedia attributes on any element (sx-get, sx-post, ...)")
          (li "Target/swap model for partial page updates")
          (li "No client-side routing, no virtual DOM")
          (li "Progressive enhancement — works without JS (mostly)")))
      (div (~tw :tokens "space-y-4")
        (h3 (~tw :tokens "text-xl font-semibold text-violet-700") "From React")
        (ul (~tw :tokens "space-y-2 text-stone-600")
          (li "Composable components with defcomp")
          (li "Client-side rendering from s-expression source")
          (li "Component caching via localStorage + hash invalidation")
          (li "On-demand CSS — only ship what's used")
          (li "DOM morphing for smooth history navigation"))))))

(defcomp ~home/how-it-works ()
  (div (~tw :tokens "max-w-4xl mx-auto px-6 py-12")
    (h2 (~tw :tokens "text-3xl font-bold text-stone-900 mb-8") "How it works")
    (div (~tw :tokens "space-y-6")
      (div (~tw :tokens "flex items-start gap-4")
        (div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold") "1")
        (div
          (h3 (~tw :tokens "font-semibold text-stone-900") "Server renders sx")
          (p (~tw :tokens "text-stone-600") "Python builds s-expression trees. Components, elements, data — all in one format.")))
      (div (~tw :tokens "flex items-start gap-4")
        (div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold") "2")
        (div
          (h3 (~tw :tokens "font-semibold text-stone-900") "Wire sends text/sx")
          (p (~tw :tokens "text-stone-600") "Responses are s-expression source code with content type text/sx. Component definitions cached client-side.")))
      (div (~tw :tokens "flex items-start gap-4")
        (div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold") "3")
        (div
          (h3 (~tw :tokens "font-semibold text-stone-900") "Client evaluates + renders")
          (p (~tw :tokens "text-stone-600") "sx.js parses, evaluates, and renders to DOM. Same evaluator runs server-side (Python) and client-side (JS)."))))))

(defcomp ~home/credits ()
  (div (~tw :tokens "max-w-4xl mx-auto px-6 py-12 border-t border-stone-200")
    (p (~tw :tokens "text-stone-500 text-sm")
      "sx is heavily inspired by "
      (a :href "https://htmx.org" (~tw :tokens "text-violet-600 hover:underline") "htmx")
      " by Carson Gross. This documentation site is modelled on "
      (a :href "https://four.htmx.org" (~tw :tokens "text-violet-600 hover:underline") "four.htmx.org")
      ". htmx showed that hypermedia belongs on the server. "
      "sx takes that idea and wraps it in parentheses.")))
