/* eslint-disable */
/* TrustFortress — sections, rewritten to tell the math story.
   Depends on globals from cube.jsx (FlowCube, ProblemCube, CornerCube, NarrativeCube, FACES, T)
   and from app.jsx (R reveal, Eyebrow, Logomark, go) — those load AFTER us, so we
   reference them lazily inside components, not at module top-level.
*/

const { useState: uS, useEffect: uE, useRef: uR } = React;
// T palette is on window (set by cube.jsx). var (not const/let) so multiple
// babel-standalone scripts can re-declare without "already declared" errors.
var T = window.T;

/* hoisted helpers used by PROBLEMS */
function arr9(v)            { return Array(9).fill(v); }
function arr9WithFail(idx)  { const a = Array(9).fill(true); a[idx] = false; return a; }

/* ============================================================
   HERO
   The cube enacts the admission flow on its surface.
   ============================================================ */
function Hero() {
  return (
    <section
      id="hero"
      data-screen-label="01 Hero"
      style={{
        background: T.ink,
        padding: "140px 28px 96px",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: `
          radial-gradient(ellipse 60% 50% at 80% 10%, ${T.violet}22 0%, transparent 60%),
          radial-gradient(ellipse 50% 40% at 10% 90%, ${T.violet}14 0%, transparent 60%)
        `,
      }} />
      <div aria-hidden className="tf-grid" />
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <R>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            paddingBottom: 32, marginBottom: 56,
            borderBottom: `1px solid ${T.hairline}`, flexWrap: "wrap", gap: 12,
            fontFamily: "var(--mono)", fontSize: 11, color: T.fgMute, letterSpacing: "0.08em", textTransform: "uppercase",
          }}>
            <span>Cubie v2.0 · 163 theorems · 7 deliverables · WriteOK = D ∧ G ∧ T ∧ P</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: T.mint, boxShadow: `0 0 0 3px ${T.mint}1a`, animation: "pulse 2s infinite" }} />
              Live · sub-1ms hot path
            </span>
          </div>
        </R>

        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)", gap: 56, alignItems: "center", marginBottom: 64 }} className="tf-hero-grid">
          <div>
            <R delay={0.05}>
              <Eyebrow>Proof-carrying admission</Eyebrow>
            </R>
            <R delay={0.1}>
              <h1 className="tf-h1" style={{
                fontSize: "clamp(40px, 5.6vw, 76px)",
                fontWeight: 400,
                color: T.fg,
                lineHeight: 0.98,
                letterSpacing: "-0.035em",
                margin: "20px 0 24px",
              }}>
                Every AI request<br/>
                becomes a cube.<br/>
                <span style={{ fontStyle: "italic", color: T.violetSoft, fontWeight: 300 }}>
                  Six faces solve, or it never runs.
                </span>
              </h1>
            </R>
            <R delay={0.18}>
              <p style={{
                fontSize: 17, lineHeight: 1.6,
                color: T.fgSoft, maxWidth: 540, marginBottom: 24,
              }}>
                Before a GPU spends a cycle, the request is folded into a
                {" "}<b style={{color: T.fg}}>54-check lattice</b> — six faces, three rows each:
                {" "}proof, binding, freshness. Two corners must agree.
                Either an admission lease emits in microseconds, or a typed denial
                certificate names the exact cell that failed.
              </p>
            </R>
            <R delay={0.22}>
              <div style={{
                display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, maxWidth: 540, marginBottom: 28,
                fontFamily: "var(--mono)", fontSize: 11,
              }}>
                {[
                  { k: "DEPLOY △", v: "identity ∧ lineage ∧ policy",  c: T.violetSoft },
                  { k: "COMPUTE △", v: "context ∧ runtime ∧ outcome",  c: T.teal },
                  { k: "TOPOLOGY", v: "nonces unique · targets match", c: T.amber },
                  { k: "POLICY",   v: "signed compiled bundle",        c: T.sky },
                ].map((x, i) => (
                  <div key={i} style={{
                    padding: "9px 12px",
                    background: `${x.c}10`,
                    border: `1px solid ${x.c}28`,
                    borderRadius: 2,
                  }}>
                    <div style={{ color: x.c, fontWeight: 700, letterSpacing: "0.08em", marginBottom: 2 }}>{x.k}</div>
                    <div style={{ color: T.fgSoft, letterSpacing: "0.01em" }}>{x.v}</div>
                  </div>
                ))}
              </div>
            </R>
            <R delay={0.26}>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
                <button onClick={() => go("hotpath")} className="tf-cta" style={{
                  padding: "14px 22px", background: T.violet, color: T.fg,
                  border: "none", borderRadius: 3, fontSize: 14, fontWeight: 600,
                  cursor: "pointer", letterSpacing: "0.005em",
                  boxShadow: `0 0 0 1px ${T.violet}, 0 14px 40px -16px ${T.violet}`,
                }}>
                  Watch the hot path →
                </button>
                <button onClick={() => go("signup")} style={{
                  padding: "14px 22px", background: "transparent", color: T.fg,
                  border: `1px solid ${T.hairlineSt}`, borderRadius: 3,
                  fontSize: 14, cursor: "pointer", letterSpacing: "0.005em", fontWeight: 500,
                }}>
                  Get early access
                </button>
              </div>
            </R>
          </div>

          <R delay={0.18}>
            <div style={{
              padding: 28,
              background: T.panel,
              border: `1px solid ${T.hairline}`,
              borderRadius: 4,
              display: "flex", flexDirection: "column", alignItems: "center",
            }}>
              <FlowCube size={300} speed={36} />
            </div>
          </R>
        </div>

        <R delay={0.2}>
          <LiveFeed />
        </R>
      </div>
    </section>
  );
}

/* ============================================================
   PROBLEM
   Each scenario shows the cube state + denial certificate.
   ============================================================ */
const PROBLEMS = [
  {
    title: "An agent deleted production in 9 seconds",
    problem: "A coding agent found an API token that, by accident, had blanket authority across every environment. One call, no confirmation. Database and backups gone in under ten seconds.",
    failFace: "policy",
    failCell: 5, // row B, cell 6 -> action_class
    denyCode: "DENY_POLICY",
    seam: "Identity ↔ Policy",
    theorem: "Ramen V1.19.1 · #14 / 23",
    cert: "policy.B.action_class · 'destructive ops require human approval'",
    color: T.red,
    faces: {
      identity: arr9(true),
      lineage:  arr9(true),
      policy:   arr9WithFail(5),
      context:  arr9(null),
      runtime:  arr9(null),
      outcome:  arr9(null),
    },
  },
  {
    title: "A staging task reached production",
    problem: "The agent was working in staging. The token's scope wasn't bound to environment. Without a topology check, the request slipped through to a prod target.",
    failFace: "runtime",
    failCell: 8,
    denyCode: "DENY_TOPOLOGY",
    seam: "Context ↔ Runtime",
    theorem: "CubieBridge V1.40 · #5 / 6",
    cert: "runtime.C.host_alive · 'caller env=staging, target pool=prod-A100'",
    color: T.violetSoft,
    faces: {
      identity: arr9(true),
      lineage:  arr9(true),
      policy:   arr9(true),
      context:  arr9(true),
      runtime:  arr9WithFail(8),
      outcome:  arr9(null),
    },
  },
  {
    title: "Two thirds of compute is wasted",
    problem: "Context bombs and retry loops pass every credential check but will never produce useful output. The dashboard reports the GPU as busy and healthy.",
    failFace: "outcome",
    failCell: 0,
    denyCode: "DENY_OR_SHAPE_GPU",
    seam: "Runtime ↔ Outcome",
    theorem: "Track C · waste corollary 41 / 54",
    cert: "outcome.C.goodput_positive · 'expected goodput ≤ 0, throttle 5s'",
    color: T.teal,
    faces: {
      identity: arr9(true),
      lineage:  arr9(true),
      policy:   arr9(true),
      context:  arr9(true),
      runtime:  arr9(true),
      outcome:  arr9WithFail(0),
    },
  },
  {
    title: "Backups stored in the same blast radius",
    problem: "Provider sold volume backups as resilience. Backups were on the same volume. Volume deleted, backups gone with it. Most recent recoverable backup was three months old.",
    failFace: "outcome",
    failCell: 7,
    denyCode: "DENY_POLICY",
    seam: "Policy ↔ Outcome",
    theorem: "Ramen V1.19.1 · #23 / 23",
    cert: "outcome.C.blast_radius · 'irreversible op without out-of-band recovery'",
    color: T.amber,
    faces: {
      identity: arr9(true),
      lineage:  arr9(true),
      policy:   arr9(true),
      context:  arr9(true),
      runtime:  arr9(true),
      outcome:  arr9WithFail(7),
    },
  },
];

function Problem() {
  return (
    <section id="problem" data-screen-label="02 Problem" style={{ background: T.paper, padding: "140px 28px 120px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <R><Eyebrow color={T.ink}>02 · Typed denial certificates</Eyebrow></R>
          <R delay={0.06}>
            <h2 className="tf-h2" style={{
              fontSize: "clamp(32px, 4.6vw, 56px)", fontWeight: 400, color: T.ink,
              lineHeight: 1.04, letterSpacing: "-0.03em", margin: "20px 0 20px",
            }}>
              When the cube can't solve,<br/>
              <span style={{ fontStyle: "italic", color: T.ink2 }}>it tells you which cell broke.</span>
            </h2>
          </R>
          <R delay={0.12}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "rgba(10,14,26,0.65)", maxWidth: 720 }}>
              Real incidents. Each one names a single cell — face, row, predicate — backed by a numbered theorem in the verification stack. Denial isn't an opinion; it's an explainable certificate the auditor can replay.
            </p>
          </R>
        </div>

        <div style={{ borderTop: `1px solid rgba(10,14,26,0.18)` }}>
          {PROBLEMS.map((p, i) => (
            <R key={i} delay={0.04 * i}>
              <div className="tf-row" style={{
                display: "grid",
                gridTemplateColumns: "minmax(0,1fr) 240px minmax(0,1.1fr)",
                borderBottom: `1px solid rgba(10,14,26,0.14)`,
                alignItems: "stretch",
              }}>
                <div style={{ padding: "36px 32px 36px 0" }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: T.red, letterSpacing: "0.16em", marginBottom: 14 }}>
                    {String(i + 1).padStart(2, "0")} / INCIDENT
                  </div>
                  <h3 style={{
                    fontSize: "clamp(20px,2vw,26px)", fontWeight: 500,
                    color: T.ink, lineHeight: 1.18, letterSpacing: "-0.015em", marginBottom: 14,
                  }}>
                    {p.title}
                  </h3>
                  <p style={{ fontSize: 14, color: "rgba(10,14,26,0.68)", lineHeight: 1.65 }}>
                    {p.problem}
                  </p>
                </div>

                <div style={{
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                  gap: 10, padding: "32px 8px",
                  borderLeft: `1px solid rgba(10,14,26,0.10)`,
                  borderRight: `1px solid rgba(10,14,26,0.10)`,
                  background: `radial-gradient(ellipse at center, ${p.color}10 0%, transparent 70%)`,
                }}>
                  <ProblemCube size={120} faces={p.faces} highlight={p.failFace} />
                  <div style={{
                    fontFamily: "var(--mono)", fontSize: 10, fontWeight: 700,
                    color: p.color, letterSpacing: "0.1em",
                  }}>
                    {p.seam.toUpperCase()}
                  </div>
                </div>

                <div style={{ padding: "36px 0 36px 32px" }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: T.violet, letterSpacing: "0.16em", marginBottom: 14 }}>
                    {String(i + 1).padStart(2, "0")} / DENIAL CERTIFICATE
                  </div>
                  <div style={{
                    background: T.ink,
                    border: `1px solid ${T.ink2}`,
                    borderRadius: 3,
                    padding: 16,
                    fontFamily: "var(--mono)", fontSize: 11,
                    color: T.fgSoft,
                    lineHeight: 1.7,
                    marginBottom: 14,
                  }}>
                    <div style={{ display: "flex", gap: 8, marginBottom: 8, alignItems: "center", flexWrap: "wrap" }}>
                      <span style={{
                        padding: "2px 8px", background: T.red, color: T.fg, borderRadius: 2,
                        fontSize: 10, fontWeight: 700, letterSpacing: "0.08em",
                      }}>{p.denyCode}</span>
                      <span style={{ color: T.fgMute }}>req-{(0xa1c30b + i*7).toString(16)}</span>
                    </div>
                    <div><span style={{ color: T.fgMute }}>cell  </span><span style={{ color: T.fg }}>{p.cert}</span></div>
                    <div><span style={{ color: T.fgMute }}>theorem </span><span style={{ color: T.violetSoft }}>⊢ {p.theorem}</span></div>
                    <div><span style={{ color: T.fgMute }}>epoch </span><span style={{ color: T.fg }}>policy=2841 · telem=11929</span></div>
                  </div>
                  <div style={{
                    display: "inline-flex", alignItems: "center", gap: 8,
                    padding: "6px 12px",
                    background: `${T.violet}10`,
                    border: `1px solid ${T.violet}28`,
                    borderRadius: 2,
                    fontFamily: "var(--mono)", fontSize: 11, color: T.violet, letterSpacing: "0.04em",
                  }}>
                    <span style={{ width: 6, height: 6, background: T.violet, borderRadius: "50%" }}/>
                    Denied before prefill
                  </div>
                </div>
              </div>
            </R>
          ))}
        </div>

        <R delay={0.06}>
          <blockquote style={{
            marginTop: 64, padding: "0 0 0 32px",
            borderLeft: `2px solid ${T.violet}`,
            maxWidth: 820,
            fontSize: "clamp(22px, 2.6vw, 32px)",
            lineHeight: 1.32, letterSpacing: "-0.018em",
            color: T.ink, fontWeight: 400,
          }}>
            <span style={{ fontStyle: "italic", color: T.ink2 }}>System prompts are advisory.</span>{" "}
            Compiled bundles are enforcing. The verdict lives in bytecode tied to a theorem hash, not in a paragraph the model is supposed to obey.
          </blockquote>
        </R>
      </div>
    </section>
  );
}

/* ============================================================
   CUBE — show the 6 faces, the 3-row schema, and how they
   collapse into 2 corners.
   ============================================================ */
function CubeSection() {
  const [af, setAf] = uS("identity");
  const active = FACES.find((f) => f.id === af);

  // Build state where the active face is fully on, others dim
  const state = {};
  FACES.forEach((f) => {
    state[f.id] = f.id === af ? Array(9).fill(true) : Array(9).fill(null);
  });

  return (
    <section id="cube" data-screen-label="03 Cube" style={{ background: T.ink, padding: "140px 28px 120px", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: `radial-gradient(ellipse 60% 50% at 50% 30%, ${T.violet}14 0%, transparent 60%)` }} />
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative" }}>
        <div style={{ maxWidth: 780, marginBottom: 56 }}>
          <R><Eyebrow>03 · The 54-check lattice</Eyebrow></R>
          <R delay={0.06}>
            <h2 className="tf-h2" style={{
              fontSize: "clamp(32px,4.6vw,56px)", fontWeight: 400, color: T.fg,
              lineHeight: 1.04, letterSpacing: "-0.03em", margin: "20px 0 20px",
            }}>
              Six faces. Three rows each.<br/>
              <span style={{ fontStyle: "italic", color: T.violetSoft, fontWeight: 300 }}>
                Proof. Binding. Freshness.
              </span>
            </h2>
          </R>
          <R delay={0.12}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: T.fgSoft, maxWidth: 720 }}>
              Each face answers one of six questions — who, what, where, how, why, when. Each face has the same three rows: row A is presence (does the proof exist?), row B is binding (does it match?), row C is freshness (is it still valid?). 6 × 3 × 3 = 54 finite checks. Pick a face.
            </p>
          </R>
        </div>

        <R delay={0.16}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "minmax(280px, 360px) minmax(0, 1fr)",
            gap: 48, alignItems: "flex-start",
            background: T.panel, border: `1px solid ${T.hairline}`,
            padding: 40, borderRadius: 4,
          }} className="tf-cube-grid">
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 22 }}>
              <NarrativeCube size={280} speed={32} state={state} highlight={af} />
              <div style={{ display: "flex", gap: 6, justifyContent: "center", flexWrap: "wrap" }}>
                {FACES.map((f) => (
                  <button
                    key={f.id}
                    onClick={() => setAf(f.id)}
                    style={{
                      padding: "7px 13px",
                      fontSize: 11,
                      fontWeight: 600,
                      fontFamily: "var(--mono)",
                      letterSpacing: "0.06em",
                      borderRadius: 2,
                      cursor: "pointer",
                      background: af === f.id ? f.color : "transparent",
                      color: af === f.id ? T.ink : f.color,
                      border: `1px solid ${af === f.id ? f.color : f.color + "44"}`,
                      transition: "all 0.2s",
                    }}
                  >
                    {f.label}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap", marginBottom: 6 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: active.color, letterSpacing: "0.16em" }}>
                  {active.label.toUpperCase()} · {active.q}
                </div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: T.fgMute, letterSpacing: "0.08em" }}>
                  {active.corner === "deploy" ? "DEPLOYMENT △" : "COMPUTE △"} · 9 cells
                </div>
              </div>
              <h3 style={{
                fontSize: 28, fontWeight: 400, color: T.fg, marginBottom: 22,
                letterSpacing: "-0.02em", lineHeight: 1.18,
              }}>
                {{
                  identity: "Who is acting, and is it still them?",
                  lineage:  "Where did this code come from?",
                  policy:   "Why is this allowed, right now?",
                  context:  "What does the request actually look like?",
                  runtime:  "How will this fit the hardware?",
                  outcome:  "When is this worth burning a cycle?",
                }[active.id]}
              </h3>

              {/* 3x3 schema table */}
              <div style={{
                display: "grid", gridTemplateColumns: "70px 1fr 1fr 1fr",
                gap: 0, borderTop: `1px solid ${T.hairline}`,
              }}>
                {[
                  { row: "A", label: "presence", desc: "is the proof there?" },
                  { row: "B", label: "binding",  desc: "does it match?" },
                  { row: "C", label: "freshness",desc: "is it still valid?" },
                ].map((r, ri) => (
                  <React.Fragment key={r.row}>
                    <div style={{
                      padding: "16px 10px",
                      borderBottom: `1px solid ${T.hairline}`,
                      fontFamily: "var(--mono)", fontSize: 11,
                    }}>
                      <div style={{ color: active.color, fontWeight: 700, letterSpacing: "0.1em" }}>{r.row}</div>
                      <div style={{ color: T.fgMute, fontSize: 9, marginTop: 2, letterSpacing: "0.06em" }}>{r.label}</div>
                    </div>
                    {active.rows[ri].map((cell, ci) => (
                      <div key={ci} style={{
                        padding: "16px 14px",
                        borderBottom: `1px solid ${T.hairline}`,
                        borderLeft: `1px solid ${T.hairline}`,
                        background: `linear-gradient(160deg, ${active.color}12, ${active.color}03)`,
                      }}>
                        <div style={{
                          fontFamily: "var(--mono)", fontSize: 9, color: T.fgMute,
                          letterSpacing: "0.08em", marginBottom: 4,
                        }}>
                          {active.id}.{r.row}.{ci+1}
                        </div>
                        <div style={{
                          fontFamily: "var(--mono)", fontSize: 12, color: T.fg, letterSpacing: "0.01em",
                        }}>
                          {cell}
                        </div>
                      </div>
                    ))}
                  </React.Fragment>
                ))}
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: T.fgMute, marginTop: 14, letterSpacing: "0.04em" }}>
                One cell red ⇒ face fails ⇒ corner fails ⇒ DENY (before prefill).
              </div>
            </div>
          </div>
        </R>

        {/* Two-corner decomposition */}
        <R delay={0.1}>
          <div style={{ marginTop: 56 }}>
            <Eyebrow color={T.violetSoft}>The two-corner theorem</Eyebrow>
            <h3 style={{
              fontSize: 26, fontWeight: 400, color: T.fg,
              margin: "12px 0 6px", letterSpacing: "-0.02em",
            }}>
              Six faces collapse to a single line of math.
            </h3>
            <p style={{ fontSize: 14, color: T.fgSoft, maxWidth: 720, marginBottom: 28, lineHeight: 1.65 }}>
              The cube has eight corners; only two carry decisions. The Deployment corner unites identity, lineage and policy — it asks "is the right software running with the right permission?" The Compute corner unites context, runtime and outcome — it asks "is it worth a GPU cycle?" Both must pass. Neither is sufficient alone.
            </p>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 32, alignItems: "center",
            padding: 40, background: T.panel, border: `1px solid ${T.hairline}`, borderRadius: 4,
          }} className="tf-corners-grid">
            <CornerPanel kind="deploy" />
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
              <div style={{
                fontFamily: "var(--mono)", fontSize: 22, color: T.fg, fontWeight: 600, letterSpacing: "0.04em",
              }}>∧</div>
              <div style={{
                padding: "10px 16px",
                background: `${T.violet}1a`,
                border: `1px solid ${T.violet}66`,
                borderRadius: 3,
                fontFamily: "var(--mono)", fontSize: 11, color: T.fg, letterSpacing: "0.06em",
                textAlign: "center", lineHeight: 1.5,
              }}>
                <div style={{ color: T.violetSoft, fontWeight: 700, marginBottom: 2 }}>WriteOK</div>
                <div style={{ fontSize: 10, color: T.fgSoft }}>= D ∧ G ∧ T ∧ P</div>
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 9, color: T.fgMute, maxWidth: 130, textAlign: "center", letterSpacing: "0.04em", lineHeight: 1.5 }}>
                CubieBridge V1.40<br/>theorems #1–#6
              </div>
            </div>
            <CornerPanel kind="compute" />
          </div>
        </R>
      </div>
    </section>
  );
}

function CornerPanel({ kind }) {
  const isDeploy = kind === "deploy";
  const color = isDeploy ? T.violetSoft : T.teal;
  const faces = FACES.filter((f) => f.corner === (isDeploy ? "deploy" : "compute"));
  return (
    <div style={{
      padding: 24,
      background: `${color}0a`,
      border: `1px solid ${color}33`,
      borderRadius: 3,
      display: "flex", flexDirection: "column", gap: 16,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color, letterSpacing: "0.14em", fontWeight: 700 }}>
            {isDeploy ? "DEPLOYMENT △" : "COMPUTE △"}
          </div>
          <div style={{ fontSize: 12, color: T.fgMute, marginTop: 4, lineHeight: 1.5 }}>
            {isDeploy
              ? "right software, right source, right permission"
              : "fits the hardware, won't waste a cycle"}
          </div>
        </div>
        <CornerCube size={88} kind={kind} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {faces.map((f) => (
          <div key={f.id} style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "8px 10px",
            background: `${T.fg}03`,
            borderRadius: 2,
          }}>
            <span style={{ width: 8, height: 8, background: f.color, borderRadius: 1 }} />
            <span style={{ fontSize: 13, color: T.fg, fontWeight: 500, minWidth: 64 }}>{f.label}</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: T.fgMute, letterSpacing: "0.04em" }}>
              {f.id}.A · {f.id}.B · {f.id}.C
            </span>
          </div>
        ))}
      </div>
      <div style={{
        fontFamily: "var(--mono)", fontSize: 10, color: T.fgSoft, letterSpacing: "0.04em",
        paddingTop: 8, borderTop: `1px solid ${color}22`,
      }}>
        {isDeploy
          ? "id_ok ∧ attest_ok ∧ prov_ok ∧ lin_ok"
          : "time_ok ∧ scope_ok ∧ waste_ok"}
      </div>
    </div>
  );
}

/* ============================================================
   HOT PATH — sub-1ms timeline
   ============================================================ */
function HotPath() {
  const [t, setT] = uS(0); // 0..100 progress
  uE(() => {
    let raf;
    let start = performance.now();
    const tick = (now) => {
      const elapsed = (now - start) / 1000; // seconds
      const cycle = (elapsed % 5) / 5;       // 0..1 every 5s
      setT(cycle * 100);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const stages = [
    { label: "envelope parse",       sub: "headers + signed metadata",   ns: "100µs", at: 0,  w: 18, color: T.violetSoft },
    { label: "5VID + PoP cache",     sub: "no TLS handshake, cached",     ns: "20µs",  at: 18, w: 8,  color: T.sky },
    { label: "SeamFacts build",      sub: "bitsets, epochs, hashes",      ns: "80µs",  at: 26, w: 14, color: T.amber },
    { label: "bytecode VM",          sub: "branch-light Boolean predicates", ns: "120µs", at: 40, w: 22, color: T.mint },
    { label: "telem snapshot lookup",sub: "RCU shared-mem · no syscall",   ns: "70µs",  at: 62, w: 12, color: T.teal },
    { label: "corner reduce",        sub: "D ∧ G ∧ T ∧ P",                 ns: "50µs",  at: 74, w: 10, color: T.violet },
    { label: "lease / cert mint",    sub: "HMAC + EdDSA, 8-byte tag",       ns: "60µs",  at: 84, w: 12, color: T.fg },
    { label: "forward",              sub: "to scheduler / GPU prefill",    ns: "30µs",  at: 96, w: 4,  color: T.mint },
  ];

  return (
    <section id="hotpath" data-screen-label="04 Hot Path"
      style={{ background: T.paper, padding: "140px 28px 120px", position: "relative" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ maxWidth: 780, marginBottom: 48 }}>
          <R><Eyebrow color={T.ink}>04 · Sub-1ms hot path</Eyebrow></R>
          <R delay={0.06}>
            <h2 className="tf-h2" style={{
              fontSize: "clamp(32px,4.6vw,56px)", fontWeight: 400, color: T.ink,
              lineHeight: 1.04, letterSpacing: "-0.03em", margin: "20px 0 20px",
            }}>
              From request to lease<br/>
              <span style={{ fontStyle: "italic", color: T.ink2 }}>in less than a millisecond.</span>
            </h2>
          </R>
          <R delay={0.12}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "rgba(10,14,26,0.65)", maxWidth: 720 }}>
              The cube is not built from a free-form prompt. The hot path takes a bounded envelope, joins it against locally-cached snapshots — registry, attestation epoch, telemetry epoch, signed policy bundle — and runs branch-light bytecode against fixed-size fact tables. Anything slow lives in the cold path and arrives via signed bundles.
            </p>
          </R>
        </div>

        <R delay={0.16}>
          <div style={{
            background: "white",
            border: `1px solid rgba(10,14,26,0.14)`, borderRadius: 4,
            padding: 36,
          }}>
            {/* timeline */}
            <div style={{ position: "relative", height: 88, marginBottom: 24 }}>
              {/* axis */}
              <div style={{
                position: "absolute", left: 0, right: 0, top: 56, height: 2,
                background: "rgba(10,14,26,0.10)",
              }} />
              {/* progress bar */}
              <div style={{
                position: "absolute", left: 0, top: 56, height: 2,
                width: `${t}%`,
                background: T.violet,
                boxShadow: `0 0 0 1px ${T.violet}, 0 0 12px ${T.violet}66`,
                transition: "width 0.05s linear",
              }} />
              {/* head */}
              <div style={{
                position: "absolute", left: `${t}%`, top: 50,
                width: 14, height: 14, borderRadius: "50%",
                background: T.violet,
                boxShadow: `0 0 0 4px ${T.violet}33`,
                transform: "translateX(-7px)",
                transition: "left 0.05s linear",
              }} />
              {/* stage blocks */}
              {stages.map((s, i) => {
                const reached = t >= s.at;
                return (
                  <div key={i} style={{
                    position: "absolute",
                    left: `${s.at}%`, width: `${s.w}%`,
                    top: 0, height: 50,
                    borderLeft: `1px dashed rgba(10,14,26,0.18)`,
                    paddingLeft: 6, paddingTop: 4,
                  }}>
                    <div style={{
                      fontFamily: "var(--mono)", fontSize: 10,
                      color: reached ? s.color : "rgba(10,14,26,0.38)",
                      fontWeight: 700, letterSpacing: "0.04em",
                      transition: "color 0.2s",
                    }}>
                      {s.ns}
                    </div>
                    <div style={{
                      fontSize: 11, color: reached ? T.ink : "rgba(10,14,26,0.42)",
                      fontWeight: 500, letterSpacing: "-0.005em",
                      lineHeight: 1.25, marginTop: 2,
                      transition: "color 0.2s",
                    }}>
                      {s.label}
                    </div>
                    <div style={{
                      fontFamily: "var(--mono)", fontSize: 9,
                      color: reached ? "rgba(10,14,26,0.6)" : "rgba(10,14,26,0.32)",
                      letterSpacing: "0.02em", marginTop: 1,
                      transition: "color 0.2s",
                    }}>
                      {s.sub}
                    </div>
                  </div>
                );
              })}
              {/* rail labels */}
              <div style={{ position: "absolute", left: 0, top: 70, fontFamily: "var(--mono)", fontSize: 10, color: T.ink2, letterSpacing: "0.08em" }}>
                T = 0
              </div>
              <div style={{ position: "absolute", right: 0, top: 70, fontFamily: "var(--mono)", fontSize: 10, color: T.ink2, letterSpacing: "0.08em" }}>
                T &lt; 1ms · admission lease emitted
              </div>
            </div>

            {/* explicitly excluded */}
            <div style={{
              marginTop: 32, paddingTop: 24,
              borderTop: `1px solid rgba(10,14,26,0.12)`,
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32,
            }} className="tf-hot-grid">
              <div>
                <Eyebrow color={T.red}>Explicitly excluded from hot path</Eyebrow>
                <ul style={{ marginTop: 12, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                  {[
                    "Live DCGM polling",
                    "Fresh TPM/Sigstore verification",
                    "Full prompt semantic scan",
                    "New TLS handshake",
                    "Remote OPA bundle pull",
                    "Transparency log lookup",
                  ].map((x) => (
                    <li key={x} style={{
                      fontFamily: "var(--mono)", fontSize: 11, color: "rgba(10,14,26,0.7)",
                      paddingLeft: 18, position: "relative",
                    }}>
                      <span style={{
                        position: "absolute", left: 0, top: 4,
                        width: 10, height: 2, background: T.red,
                      }} />
                      {x}
                    </li>
                  ))}
                </ul>
                <div style={{ fontSize: 11, color: "rgba(10,14,26,0.5)", marginTop: 12, lineHeight: 1.5 }}>
                  These run on the cold path and are pre-baked into signed bundles + epoch snapshots before requests land.
                </div>
              </div>

              <div>
                <Eyebrow color={T.mint}>Read-only inputs the hot path uses</Eyebrow>
                <ul style={{ marginTop: 12, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                  {[
                    "Signed bundle (policy + theorem hash)",
                    "Attestation epoch (TPM/TDX cached)",
                    "Telemetry epoch (rack-state hash)",
                    "5VID identity cache (PoP-bound)",
                    "Model + route registry snapshot",
                    "Replay window + nonce ring",
                  ].map((x) => (
                    <li key={x} style={{
                      fontFamily: "var(--mono)", fontSize: 11, color: "rgba(10,14,26,0.78)",
                      paddingLeft: 18, position: "relative",
                    }}>
                      <span style={{
                        position: "absolute", left: 0, top: 4,
                        width: 10, height: 2, background: T.mint,
                      }} />
                      {x}
                    </li>
                  ))}
                </ul>
                <div style={{ fontSize: 11, color: "rgba(10,14,26,0.5)", marginTop: 12, lineHeight: 1.5 }}>
                  Same request × same epoch ⇒ same verdict. Determinism is a theorem, not a test.
                </div>
              </div>
            </div>
          </div>
        </R>

        {/* Energy arbitrage callout */}
        <R delay={0.1}>
          <div style={{
            marginTop: 28, padding: "24px 28px",
            background: T.ink, color: T.fg, borderRadius: 4,
            display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap",
          }}>
            <div>
              <Eyebrow color={T.amber}>Energy arbitrage</Eyebrow>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 8, letterSpacing: "-0.01em" }}>
                It costs <b style={{ color: T.amber }}>1.75 J</b> to evaluate the cube.
                A wasted GPU prefill burns <b style={{ color: T.red }}>43,750 J</b>.
              </div>
            </div>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 32, fontWeight: 600,
              color: T.mint, letterSpacing: "-0.02em",
            }}>
              25,000×
            </div>
          </div>
        </R>
      </div>
    </section>
  );
}

/* ============================================================
   SEAMS — same cross-corner spirit, but now showing seams as the
   actual edges between corner-incident faces.
   ============================================================ */
function SeamSection() {
  const [active, setActive] = uS(0);
  const examples = [
    {
      title: "Two requests look identical to monitoring",
      faces: ["identity","policy"],
      scenario: "Same route, model, telemetry, health, token count, service. Dashboards see them as twins.",
      seam: "But A has fresh PoP-bound SVID and current policy epoch. B has a replayed nonce and a stale telemetry snapshot. The identity↔policy seam diverges. A admits in 240µs. B emits DENY_BYPASS.",
      thm: "V1.31 corner spoofing #2",
      color: T.amber,
    },
    {
      title: "Compute that looks productive but isn't",
      faces: ["context","outcome"],
      scenario: "24,000-token context. Runtime has KV headroom. GPU shows 92% utilization.",
      seam: "Context↔outcome seam: same caller hash + payload hash three times in five minutes; goodput estimate ≤ 0. The runtime face is fine. The seam fails. THROTTLE for 5s, denial cert ⊢ Track C #41.",
      thm: "Track C corollary 41",
      color: T.teal,
    },
    {
      title: "Right token, wrong target",
      faces: ["policy","runtime"],
      scenario: "Admin token, valid permission, valid route. Identity green. Policy green.",
      seam: "But the action targets pool prod-A100 while the caller's tenant binding only allows pool dev-A10. Topology check fails: nonce unique, target mismatch. DENY_TOPOLOGY before scheduler sees it.",
      thm: "V1.30 ToR admission #3",
      color: T.violetSoft,
    },
  ];
  const ex = examples[active];

  return (
    <section id="seams" data-screen-label="05 Seams" style={{ background: T.ink, padding: "140px 28px 120px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ maxWidth: 780, marginBottom: 48 }}>
          <R><Eyebrow>05 · Seams ≠ faces</Eyebrow></R>
          <R delay={0.06}>
            <h2 className="tf-h2" style={{
              fontSize: "clamp(32px,4.6vw,56px)", fontWeight: 400, color: T.fg,
              lineHeight: 1.04, letterSpacing: "-0.03em", margin: "20px 0 20px",
            }}>
              Faces are facts.<br/>
              <span style={{ fontStyle: "italic", color: T.violetSoft, fontWeight: 300 }}>
                Seams are where they have to agree.
              </span>
            </h2>
          </R>
          <R delay={0.12}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: T.fgSoft, maxWidth: 720 }}>
              A face check asks "is this credential valid?" A seam check asks "is this credential consistent with that other one, in this epoch, on this topology?" Two requests can have identical face projections and still differ on a seam — proven by the corner-spoofing separation theorem. Faces are what the attacker can spoof. Seams are what they can't.
            </p>
          </R>
        </div>

        <R delay={0.16}>
          <div style={{
            display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.3fr)",
            gap: 24, alignItems: "stretch",
          }} className="tf-seam-grid">
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {examples.map((e, i) => (
                <button
                  key={i}
                  onClick={() => setActive(i)}
                  style={{
                    textAlign: "left",
                    padding: "20px 24px",
                    background: active === i ? T.panel : "transparent",
                    border: `1px solid ${active === i ? T.hairlineSt : "transparent"}`,
                    borderLeft: `3px solid ${active === i ? e.color : "rgba(245,242,234,0.12)"}`,
                    borderRadius: 2, cursor: "pointer",
                    transition: "all 0.2s",
                  }}
                >
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: e.color, letterSpacing: "0.16em", marginBottom: 8 }}>
                    SEAM · {e.faces[0].toUpperCase()} ↔ {e.faces[1].toUpperCase()}
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 500, color: T.fg, lineHeight: 1.35, letterSpacing: "-0.01em" }}>
                    {e.title}
                  </div>
                </button>
              ))}
            </div>
            <div style={{
              background: T.panel, border: `1px solid ${T.hairline}`, borderRadius: 3,
              padding: 32, display: "flex", flexDirection: "column", gap: 20,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <NarrativeCube
                  size={88} speed={20}
                  state={(() => {
                    const s = {};
                    FACES.forEach((f) => {
                      s[f.id] = ex.faces.includes(f.id)
                        ? Array(9).fill(true)
                        : Array(9).fill(null);
                    });
                    return s;
                  })()}
                />
                <div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: ex.color, letterSpacing: "0.14em" }}>
                    SEAM ⊢ {ex.thm}
                  </div>
                  <div style={{ fontSize: 18, fontWeight: 500, color: T.fg, marginTop: 4, letterSpacing: "-0.01em", lineHeight: 1.3 }}>
                    {ex.title}
                  </div>
                </div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: T.fgMute, letterSpacing: "0.14em", marginBottom: 8 }}>
                  WHAT MONITORING SEES
                </div>
                <p style={{ fontSize: 14, color: T.fgSoft, lineHeight: 1.7 }}>{ex.scenario}</p>
              </div>
              <div style={{
                padding: 20, borderRadius: 2,
                background: `${ex.color}10`,
                border: `1px solid ${ex.color}30`,
              }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: ex.color, letterSpacing: "0.14em", marginBottom: 8 }}>
                  WHAT THE SEAM SEES
                </div>
                <p style={{ fontSize: 14, color: T.fg, lineHeight: 1.7, fontWeight: 500 }}>{ex.seam}</p>
              </div>
            </div>
          </div>
        </R>
      </div>
    </section>
  );
}

/* ============================================================
   PROOF STACK — replaces "Delegation"
   The 7-deliverable / 163-theorem stack mapped to runtime.
   ============================================================ */
function ProofStack() {
  const tracks = [
    { v: "V1.19.2",  name: "Ramen",            theorems: 53, role: "23 single-failure modes + diagnostics + denial counting", anchors: "explainable denial codes", color: T.violetSoft, status: "delivered" },
    { v: "V1.30",    name: "ToR Admission",    theorems: 5,  role: "host verifier + stale-epoch + goodput containment",        anchors: "no-bypass at host",        color: T.sky,       status: "delivered" },
    { v: "V1.31",    name: "Corner Spoofing",  theorems: 2,  role: "same surface, different seams — separation",                anchors: "spoof immunity",            color: T.amber,     status: "delivered" },
    { v: "V1.40",    name: "CubieBridge",      theorems: 6,  role: "WriteOK = D ∧ G ∧ T ∧ P, independence witnesses",            anchors: "two-corner gate",           color: T.violet,    status: "delivered" },
    { v: "V1.50",    name: "Face Promotion",   theorems: 17, role: "54-check face promotion + spoofing separation",              anchors: "cell-level denial",         color: T.mint,      status: "delivered" },
    { v: "V2.0-A",   name: "Per-Predicate",    theorems: 54, role: "1 corollary per face cell, 1 theorem per face check",        anchors: "every cell carries proof",  color: T.teal,      status: "delivered" },
    { v: "V2.0-C",   name: "Track C Canonical",theorems: 26, role: "lease integrity · bypass · epoch · HA split-brain fail-closed", anchors: "lease lifecycle + HA",      color: T.red,       status: "delivered" },
  ];
  const total = tracks.reduce((a, b) => a + b.theorems, 0);

  return (
    <section id="proofstack" data-screen-label="06 Proof Stack" style={{ background: T.paper, padding: "140px 28px 120px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ maxWidth: 780, marginBottom: 48 }}>
          <R><Eyebrow color={T.ink}>06 · The proof stack</Eyebrow></R>
          <R delay={0.06}>
            <h2 className="tf-h2" style={{
              fontSize: "clamp(32px,4.6vw,56px)", fontWeight: 400, color: T.ink,
              lineHeight: 1.04, letterSpacing: "-0.03em", margin: "20px 0 20px",
            }}>
              {total} theorems. Seven deliverables.<br/>
              <span style={{ fontStyle: "italic", color: T.ink2 }}>Every runtime decision points back at a number.</span>
            </h2>
          </R>
          <R delay={0.12}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "rgba(10,14,26,0.65)", maxWidth: 720 }}>
              The runtime doesn't re-prove anything in flight — it verifies signed bundles whose bytecode is the compiled image of these theorems. When a request denies, the certificate carries the theorem reference. Auditors replay the bytecode against the same epoch and reproduce the same verdict, bit-for-bit.
            </p>
          </R>
        </div>

        <R delay={0.16}>
          <div style={{
            background: "white",
            border: `1px solid rgba(10,14,26,0.14)`, borderRadius: 4,
            overflow: "hidden",
          }}>
            <div className="tf-stack-head" style={{
              display: "grid",
              gridTemplateColumns: "90px 1.2fr 70px 2fr 1.4fr",
              gap: 16, padding: "14px 24px",
              borderBottom: `1px solid rgba(10,14,26,0.12)`,
              fontFamily: "var(--mono)", fontSize: 10, color: "rgba(10,14,26,0.5)", letterSpacing: "0.14em",
            }}>
              <span>VERSION</span><span>TRACK</span><span>THEOREMS</span><span>WHAT IT PROVES</span><span>RUNTIME ANCHOR</span>
            </div>
            {tracks.map((t, i) => (
              <div key={i} className="tf-stack-row" style={{
                display: "grid",
                gridTemplateColumns: "90px 1.2fr 70px 2fr 1.4fr",
                gap: 16, padding: "20px 24px", alignItems: "center",
                borderBottom: i === tracks.length - 1 ? "none" : `1px solid rgba(10,14,26,0.10)`,
              }}>
                <span style={{
                  fontFamily: "var(--mono)", fontSize: 11, color: T.ink, fontWeight: 600, letterSpacing: "0.04em",
                }}>{t.v}</span>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: T.ink, letterSpacing: "-0.005em" }}>{t.name}</div>
                  <div style={{
                    fontFamily: "var(--mono)", fontSize: 9, color: t.color, letterSpacing: "0.12em",
                    marginTop: 3, fontWeight: 700,
                  }}>{t.status.toUpperCase()}</div>
                </div>
                <span style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: 44, height: 24, padding: "0 8px",
                  background: `${t.color}1a`, color: t.color,
                  fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700,
                  borderRadius: 2, letterSpacing: "0.02em",
                }}>{t.theorems}</span>
                <span style={{ fontSize: 13, color: "rgba(10,14,26,0.7)", lineHeight: 1.5 }}>{t.role}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: T.ink, letterSpacing: "0.02em" }}>
                  {t.anchors}
                </span>
              </div>
            ))}
          </div>
        </R>

        <R delay={0.18}>
          <div style={{
            marginTop: 24,
            display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16,
          }} className="tf-stack-bottom">
            <KPI v={total} l="theorems" s="across 7 deliverables" c={T.violetSoft} />
            <KPI v="0" l="ms cold-path on hot path" s="all heavy proofs pre-baked into signed bundles" c={T.mint} />
            <KPI v="3" l="independent verifiers" s="Coq 8.18.0 + coqchk + Lean 4.15.0" c={T.amber} />
          </div>
        </R>

        <R delay={0.2}>
          <blockquote style={{
            marginTop: 56, padding: "0 0 0 24px",
            borderLeft: `2px solid ${T.violet}`,
            maxWidth: 860,
            fontSize: "clamp(20px, 2.2vw, 26px)",
            lineHeight: 1.4, letterSpacing: "-0.015em",
            color: T.ink, fontWeight: 400,
          }}>
            <span style={{ fontStyle: "italic", color: T.ink2 }}>The cube is the math, made physical.</span>{" "}
            Every edge of the cube is a theorem. Every cell is a corollary. Every denial is a proof, attached.
          </blockquote>
        </R>
      </div>
    </section>
  );
}

function KPI({ v, l, s, c }) {
  return (
    <div style={{
      padding: 24, background: "white",
      border: `1px solid rgba(10,14,26,0.14)`,
      borderLeft: `3px solid ${c}`,
      borderRadius: 2,
    }}>
      <div style={{
        fontFamily: "var(--mono)", fontSize: 36, fontWeight: 600, color: T.ink,
        letterSpacing: "-0.02em", marginBottom: 4,
      }}>{v}</div>
      <div style={{ fontSize: 13, fontWeight: 600, color: T.ink, letterSpacing: "-0.005em" }}>{l}</div>
      <div style={{ fontSize: 12, color: "rgba(10,14,26,0.55)", marginTop: 4, lineHeight: 1.5 }}>{s}</div>
    </div>
  );
}

/* exports */
Object.assign(window, { Hero, Problem, CubeSection, HotPath, SeamSection, ProofStack });
