(defcomp
  ()
  (~docs/page
    :title "CEK Demo"
    (~docs/section
      :title "What this demonstrates"
      :id "what"
      (p
        "These are "
        (strong "live islands")
        " evaluated by the CEK machine. Every "
        (code "eval-expr")
        " goes through "
        (code "cek-run")
        ". Every "
        (code "(deref sig)")
        " in an island creates a reactive DOM binding via continuation frames.")
      (p
        "The CEK machine is defined in "
        (code "cek.sx")
        " and "
        (code "frames.sx")
        " — pure s-expressions, bootstrapped to both JavaScript and Python."))
    (~docs/section
      :title "Stepper"
      :id "stepper"
      (p
        "The CEK machine is pure data→data. Each step takes a state dict and returns a new one. "
        "Type an expression, click Step to advance one CEK transition.")
      (~geography/cek/demo-stepper
        :initial-expr "(let ((x 10)) (+ x (* 2 3)))")
      (~docs/code
        :src (highlight (component-source "~geography/cek/demo-stepper") "lisp")))
    (~docs/section
      :title "Render stepper"
      :id "render-stepper"
      (p
        "Watch a component render itself. The CEK evaluates the expression — "
        "when it encounters "
        (code "(div ...)")
        ", the render adapter produces HTML in one step. "
        "Click Run to see the rendered output appear in the preview.")
      (~geography/cek/demo-render-stepper)
      (~docs/code
        :src (highlight
          (component-source "~geography/cek/demo-render-stepper")
          "lisp")))
    (~docs/section
      :title "1. Counter"
      :id "demo-counter"
      (p
        (code "(deref count)")
        " in text position creates a reactive text node. "
        (code "(deref doubled)")
        " is a computed that updates when count changes.")
      (~geography/cek/demo-counter :initial 0)
      (~docs/code
        :src (highlight (component-source "~geography/cek/demo-counter") "lisp")))
    (~docs/section
      :title "2. Computed chain"
      :id "demo-chain"
      (p
        "Three levels of computed: base -> doubled -> quadrupled. Change base, all propagate.")
      (~geography/cek/demo-chain)
      (~docs/code
        :src (highlight (component-source "~geography/cek/demo-chain") "lisp")))
    (~docs/section
      :title "3. Reactive attributes"
      :id "demo-attr"
      (p
        (code "(deref sig)")
        " in "
        (code ":class")
        " position. The CEK evaluates the "
        (code "str")
        " expression, and when the signal changes, the continuation re-evaluates and updates the attribute.")
      (~geography/cek/demo-reactive-attr)
      (~docs/code
        :src (highlight
          (component-source "~geography/cek/demo-reactive-attr")
          "lisp")))
    (~docs/section
      :title "4. Effect + cleanup"
      :id "demo-stopwatch"
      (p
        "Effects still work through CEK. This stopwatch uses "
        (code "effect")
        " with cleanup — toggling the signal clears the interval.")
      (~geography/cek/demo-stopwatch)
      (~docs/code
        :src (highlight (component-source "~geography/cek/demo-stopwatch") "lisp")))
    (~docs/section
      :title "5. Batch coalescing"
      :id "demo-batch"
      (p
        "Two signals updated in "
        (code "batch")
        " — one notification cycle. Compare render counts between batch and no-batch.")
      (~geography/cek/demo-batch)
      (~docs/code
        :src (highlight (component-source "~geography/cek/demo-batch") "lisp")))))
