(defcomp
  (&key
    js-sx-source
    defines-matched
    defines-total
    js-sx-lines
    verification-status)
  (~docs/page
    :title "Self-Hosting Bootstrapper (js.sx)"
    (div
      (~tw :tokens "space-y-8")
      (div
        (~tw :tokens "space-y-3")
        (p
          (~tw :tokens "text-stone-600")
          (code (~tw :tokens "text-violet-700 text-sm") "js.sx")
          " is an SX-to-JavaScript translator written in SX. "
          "This page runs it live: loads js.sx into the evaluator, translates every spec file, "
          "and verifies each define matches "
          (code (~tw :tokens "text-violet-700 text-sm") "bootstrap_js.py")
          "'s JSEmitter.")
        (div
          (~tw :tokens "rounded-lg p-4")
          :class (if
            (= verification-status "identical")
            "bg-green-50 border border-green-200"
            "bg-red-50 border border-red-200")
          (div
            (~tw :tokens "flex items-center gap-3")
            (span
              (~tw :tokens "inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold")
              :class (if
                (= verification-status "identical")
                "bg-green-100 text-green-800"
                "bg-red-100 text-red-800")
              (if (= verification-status "identical") "G0 == G1" "MISMATCH"))
            (p
              (~tw :tokens "text-sm")
              :class (if
                (= verification-status "identical")
                "text-green-700"
                "text-red-700")
              defines-matched
              "/"
              defines-total
              " defines match across all spec files. "
              js-sx-lines
              " lines of SX."))))
      (div
        (~tw :tokens "space-y-3")
        (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "G0 Bug Discovery")
        (div
          (~tw :tokens "rounded-lg bg-amber-50 border border-amber-200 p-4")
          (div
            (~tw :tokens "flex items-start gap-3")
            (span
              (~tw :tokens "inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-sm font-semibold text-amber-800")
              "Fixed")
            (div
              (~tw :tokens "text-sm text-amber-700 space-y-2")
              (p
                "Building js.sx revealed a bug in "
                (code "bootstrap_js.py")
                "'s "
                (code "_emit_define")
                " method. The Python code:")
              (pre
                (~tw :tokens "bg-amber-100 rounded p-2 text-xs font-mono")
                "val = self.emit(fn_expr) if fn_expr else \"NIL\"")
              (p
                "Python's "
                (code "if fn_expr")
                " treats "
                (code "0")
                ", "
                (code "False")
                ", and "
                (code "\"\"")
                " as falsy. So "
                (code "(define *batch-depth* 0)")
                " emitted "
                (code "var _batchDepth = NIL")
                " instead of "
                (code "var _batchDepth = 0")
                ". Similarly, "
                (code "(define _css-hash \"\")")
                " emitted "
                (code "var _cssHash = NIL")
                " instead of "
                (code "var _cssHash = \"\"")
                ".")
              (p
                "Fix: "
                (code "if fn_expr is not None")
                " — explicit None check. "
                "js.sx never had this bug because SX's "
                (code "nil?")
                " only matches "
                (code "nil")
                ", not "
                (code "0")
                " or "
                (code "false")
                ". "
                "The self-hosting bootstrapper caught a host language bug.")))))
      (div
        (~tw :tokens "space-y-3")
        (h2
          (~tw :tokens "text-2xl font-semibold text-stone-800")
          "Translation Differences from py.sx")
        (p
          (~tw :tokens "text-sm text-stone-500")
          "Both py.sx and js.sx translate the same SX ASTs, but target languages differ:")
        (div
          (~tw :tokens "overflow-x-auto rounded border border-stone-200")
          (table
            (~tw :tokens "w-full text-sm")
            (thead
              (~tw :tokens "bg-stone-50")
              (tr
                (th
                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
                  "Feature")
                (th
                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
                  "py.sx → Python")
                (th
                  (~tw :tokens "px-4 py-2 text-left font-semibold text-stone-700")
                  "js.sx → JavaScript")))
            (tbody
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "Name mangling")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "eval-expr → eval_expr")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "eval-expr → evalExpr"))
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "Declarations")
                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "name = value")
                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "var name = value;"))
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "Functions")
                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "lambda x: body")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "function(x) { return body; }"))
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "set! (mutation)")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "_cells dict (closure hack)")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "Direct assignment (JS captures by ref)"))
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "Tail recursion")
                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "—")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "while(true) { continue; }"))
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "let binding")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "(lambda x: body)(val)")
                (td
                  (~tw :tokens "px-4 py-2 font-mono text-xs")
                  "(function() { var x = val; return body; })()"))
              (tr
                (~tw :tokens "border-t border-stone-100")
                (td (~tw :tokens "px-4 py-2 text-stone-600") "and/or")
                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "ternary chains")
                (td (~tw :tokens "px-4 py-2 font-mono text-xs") "&& / sxOr()"))))))
      (div
        (~tw :tokens "space-y-3")
        (div
          (~tw :tokens "flex items-baseline gap-3")
          (h2 (~tw :tokens "text-2xl font-semibold text-stone-800") "js.sx Source")
          (span
            (~tw :tokens "text-sm text-stone-400 font-mono")
            "shared/sx/ref/js.sx"))
        (p
          (~tw :tokens "text-sm text-stone-500")
          "The SX-to-JavaScript translator — 61 "
          (code "define")
          " forms. "
          "camelCase mangling (500+ RENAMES), expression/statement emission, "
          "self-tail-recursive while loop optimization.")
        (div
          (~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 max-h-96 overflow-y-auto border border-stone-200")
          (pre
            (~tw :tokens "text-xs leading-relaxed whitespace-pre-wrap break-words")
            (code (highlight js-sx-source "lisp"))))))))
