;; ---------------------------------------------------------------------------
;; Philosophy
;; ---------------------------------------------------------------------------
(defcomp ()
  (~docs/page :title "Philosophy"

    (~docs/section :title "The Collapse" :id "collapse"
      (p "The web has spent two decades building increasingly complex CSS tooling: "
         "preprocessors, CSS-in-JS, atomic CSS, utility frameworks, design tokens, style "
         "dictionaries. Each solves a real problem but adds a new system with its own "
         "caching, bundling, and mental model.")
      (p "CSSX components collapse all of this back to the simplest possible thing: "
         (strong "a function that takes data and returns markup with classes.")
         " That's what a component already is. There is no separate styling system because "
         "there doesn't need to be."))

    (~docs/section :title "Proof by Deletion" :id "proof"
      (p "The strongest validation: we built the full parallel system — style dictionary, "
         "StyleValue type, content-addressed hashing, runtime injection, localStorage "
         "caching — and then deleted it because nobody used it. The codebase already had "
         "the answer: " (code "defcomp") " with " (code ":class") " strings.")
      (p "3,000 lines of infrastructure removed. Zero lines added. Every use case still works."))

    (~docs/section :title "The Right Abstraction Level" :id "abstraction"
      (p "CSS-in-JS puts styling " (em "below") " components — you style elements, then compose "
         "them. Utility CSS puts styling " (em "beside") " components — classes in markup, logic "
         "elsewhere. Both create a seam between what something does and how it looks.")
      (p "CSSX components put styling " (em "inside") " components — at the same level as "
         "structure and behavior. A " (code "~cssx/metric") " component knows its own thresholds, "
         "its own color scheme, its own responsive behavior. Styling is just another "
         "decision the component makes, not a separate concern."))

    (~docs/section :title "Relationship to Other Plans" :id "relationships"
      (ul (~tw :tokens "list-disc pl-5 space-y-2 text-stone-700")
        (li (strong "Content-Addressed Components: ") "CSSX components get CIDs like any "
            "other component. A " (code "~cssx/btn") " from one site can be shared to another via "
            "IPFS. No " (code ":css-atoms") " manifest field needed — the component carries "
            "its own styling logic.")
        (li (strong "Isomorphic Rendering: ") "Components render the same on server and client. "
            "No style injection timing issues, no FOUC from late CSS loading.")
        (li (strong "Component Bundling: ") "deps.sx already handles transitive component deps. "
            "Style components are just more components in the bundle — no separate style bundling.")
        (li (strong "Live Streaming: ") "SSE and WebSocket transports push data to components. "
            "Style components react to that data like any other component — no separate style "
            "streaming protocol.")))))
