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

    (~docs/section :title "Class Mapping" :id "class-mapping"
      (p "The simplest pattern: a component that maps semantic keywords to class strings.")
      (highlight
        "(defcomp ~cssx/btn (&key variant disabled &rest children)\n  (button\n    :class (str \"px-4 py-2 rounded font-medium transition \"\n               (case variant\n                 \"primary\" \"bg-blue-600 text-white hover:bg-blue-700\"\n                 \"danger\"  \"bg-red-600 text-white hover:bg-red-700\"\n                 \"ghost\"   \"bg-transparent hover:bg-stone-100\"\n                 \"bg-stone-200 hover:bg-stone-300\")\n               (when disabled \" opacity-50 cursor-not-allowed\"))\n    :disabled disabled\n    children))"
        "lisp")
      (p "Consumers call " (code "(~cssx/btn :variant \"primary\" \"Submit\")") ". The Tailwind "
         "classes are readable in DevTools but never repeated across call sites."))

    (~docs/section :title "Data-Driven Styling" :id "data-driven"
      (p "Styling that responds to data values — impossible with static CSS:")
      (highlight
        "(defcomp ~cssx/metric (&key value label threshold)\n  (let ((t (or threshold 10)))\n    (div :class (str \"p-3 rounded font-bold \"\n                 (cond\n                   ((> value (* t 10)) \"bg-red-500 text-white\")\n                   ((> value t)        \"bg-amber-200 text-amber-900\")\n                   (:else              \"bg-green-100 text-green-800\")))\n      (span :class \"text-sm\" label) \": \" (span (str value)))))"
        "lisp")
      (p "The component makes a " (em "decision") " about styling based on data. "
         "No CSS preprocessor or class name convention can express \"red when value > 100\"."))

    (~docs/section :title "Style Functions" :id "style-functions"
      (p "Reusable style logic that returns class strings — no wrapping element needed:")
      (highlight
        "(define card-classes\n  (fn (&key elevated bordered)\n    (str \"rounded-lg p-4 \"\n         (if elevated \"shadow-lg\" \"shadow-sm\")\n         (when bordered \" border border-stone-200\"))))\n\n;; Usage:\n(div :class (card-classes :elevated true) ...)\n(article :class (card-classes :bordered true) ...)"
        "lisp")
      (p "Or with " (code "defstyle") " for named bindings:")
      (highlight
        "(defstyle card-base \"rounded-lg p-4 shadow-sm\")\n(defstyle card-elevated \"rounded-lg p-4 shadow-lg\")\n\n(div :class card-base ...)"
        "lisp"))

    (~docs/section :title "Responsive Layouts" :id "responsive"
      (p "Components that encode responsive breakpoints:")
      (highlight
        "(defcomp ~cssx/responsive-grid (&key cols &rest children)\n  (div :class (str \"grid gap-4 \"\n               (case (or cols 3)\n                 1 \"grid-cols-1\"\n                 2 \"grid-cols-1 md:grid-cols-2\"\n                 3 \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\"\n                 4 \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"))\n    children))"
        "lisp"))

    (~docs/section :title "Emitting CSS Directly" :id "emitting-css"
      (p "Components are not limited to referencing existing classes. They can generate "
         "CSS — " (code "<style>") " tags, keyframes, custom properties — as part of their output:")
      (highlight
        "(defcomp ~cssx/pulse (&key color duration &rest children)\n  (<>\n    (style (str \"@keyframes sx-pulse {\"\n               \"0%,100% { opacity:1 } 50% { opacity:.5 } }\"))\n    (div :style (str \"animation: sx-pulse \" (or duration \"2s\") \" infinite;\"\n                    \"color:\" (or color \"inherit\"))\n      children)))"
        "lisp")
      (highlight
        "(defcomp ~cssx/theme (&key primary surface &rest children)\n  (<>\n    (style (str \":root {\"\n               \"--color-primary:\" (or primary \"#7c3aed\") \";\"\n               \"--color-surface:\" (or surface \"#fafaf9\") \"}\"))\n    children))"
        "lisp")
      (p "The CSS strategy is the component's private implementation detail. Consumers call "
         (code "(~cssx/pulse :color \"red\" \"Loading...\")") " or "
         (code "(~cssx/theme :primary \"#2563eb\" ...)") " without knowing or caring whether the "
         "component uses classes, inline styles, generated rules, or all three."))))
