/* ============================================================
   How It Works
   ============================================================ */

function HowItWorks({ go }) {
  const [activeLayer, setActiveLayer] = useState(1);

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="shell">
          <div className="bracketed" style={{ marginBottom: 28 }}>THE UNIVERSAL AXIOM</div>
          <h1 className="heading-xl" style={{ maxWidth: "22ch", marginBottom: 28 }}>
            A reasoning architecture built around the <em style={{ color: "var(--accent)", fontStyle: "italic" }}>structure</em> producing intelligence, not the artifact left behind.
          </h1>
          <p className="lede">
            The Axiom is a multi-layered transformer for spatial reasoning and introspective analysis.
            Where conventional models compress text or fit data, the Axiom decomposes a problem into
            the variables that govern it — and recomposes them into a derivation any expert can interrogate.
          </p>
        </div>
      </section>

      {/* Three layers */}
      <section style={{ borderTop: "1px solid var(--rule)" }}>
        <div className="shell">
          <div className="section-label" style={{ paddingTop: 60 }}>
            <div>
              <div className="num">— 01</div>
              <div className="label-title">Architecture</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "18ch", marginBottom: 16 }}>
                Three layers, one continuous reasoning surface.
              </h2>
            </div>
          </div>

          <div className="hiw-axiom">
            <div className="hiw-layers">
              <div
                className="hiw-layer"
                onMouseEnter={() => setActiveLayer(1)}
                style={{ cursor: "pointer", borderLeft: activeLayer === 1 ? "2px solid var(--accent)" : "2px solid transparent", paddingLeft: activeLayer === 1 ? 30 : 32 }}
              >
                <div className="l-num">L. III</div>
                <div>
                  <div className="l-title">Cognitive & Temporal Alignment</div>
                  <div className="l-text">
                    Anchors the system in objective truth and long-term consequence. Every output
                    aligned to the time-evolution of the variables it depends on.
                  </div>
                  <div className="l-vars">
                    <span className="l-var">X · Subjectivity</span>
                    <span className="l-var">Y · Why-Axis</span>
                    <span className="l-var">Z · TimeSphere</span>
                  </div>
                </div>
              </div>
              <div
                className="hiw-layer"
                onMouseEnter={() => setActiveLayer(2)}
                style={{ cursor: "pointer", borderLeft: activeLayer === 2 ? "2px solid var(--accent)" : "2px solid transparent", paddingLeft: activeLayer === 2 ? 30 : 32 }}
              >
                <div className="l-num">L. II</div>
                <div>
                  <div className="l-title">Dynamic Processes</div>
                  <div className="l-text">
                    Generative motion. Exponential growth handles dynamic expansion of state;
                    Fibonacci-balanced processes hold the system stable as it grows.
                  </div>
                  <div className="l-vars">
                    <span className="l-var">E_n · Exponential</span>
                    <span className="l-var">F_n · Fibonacci</span>
                  </div>
                </div>
              </div>
              <div
                className="hiw-layer"
                onMouseEnter={() => setActiveLayer(3)}
                style={{ cursor: "pointer", borderLeft: activeLayer === 3 ? "2px solid var(--accent)" : "2px solid transparent", paddingLeft: activeLayer === 3 ? 30 : 32 }}
              >
                <div className="l-num">L. I</div>
                <div>
                  <div className="l-title">Fundamental Principles</div>
                  <div className="l-text">
                    The attention mechanism, redefined. Impulses, elements, and pressures —
                    the raw axes along which every problem can be decomposed.
                  </div>
                  <div className="l-vars">
                    <span className="l-var">A · Impulse</span>
                    <span className="l-var">B · Element</span>
                    <span className="l-var">C · Pressure</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="hiw-diagram">
              {[1, 2, 3, 4, 5, 6].map(i => (
                <div
                  key={i}
                  className={`hiw-ring ${(activeLayer === 1 && i <= 2) || (activeLayer === 2 && i > 2 && i <= 4) || (activeLayer === 3 && i > 4) ? "active" : ""}`}
                  style={{
                    width: `${i * 16}%`,
                    height: `${i * 16}%`,
                  }}
                />
              ))}
              <div className="hiw-center">axiom</div>
            </div>
          </div>
        </div>
      </section>

      {/* The Loop */}
      <section className="section">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 02</div>
              <div className="label-title">The Loop</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "20ch" }}>
                Every output arrives with its derivation — the same path that produced it.
              </h2>
            </div>
          </div>

          <div className="how-preview" style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
            <div className="how-step">
              <div className="step-num">A → INGEST</div>
              <h3 className="step-h">Surface, not stream.</h3>
              <p className="step-t">
                Inputs read as one continuous problem space. Structured data, unstructured text,
                expert interviews, and time-series enter the same surface — no glue code, no pipelines.
              </p>
            </div>
            <div className="how-step">
              <div className="step-num">B → DECOMPOSE</div>
              <h3 className="step-h">Pressures, not features.</h3>
              <p className="step-t">
                The Axiom decomposes the surface into the variables actually producing it.
                Conventional models read symptoms; the Axiom reads the system generating them.
              </p>
            </div>
            <div className="how-step">
              <div className="step-num">C → RECOMPOSE</div>
              <h3 className="step-h">Derivation as output.</h3>
              <p className="step-t">
                The answer is not "0.87 confidence". It is the chain of inferences from
                pressure variables to recommendation, each step inspectable, each contestable.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison */}
      <section className="section-tight">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 03</div>
              <div className="label-title">vs. Conventional</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "20ch" }}>
                Not a better transformer. A different class of system.
              </h2>
            </div>
          </div>

          <div className="hiw-compare">
            <div className="traditional">
              <h4>Reinforcement & Transformer Models</h4>
              <ul>
                <li>Pre-trained, narrow, static. Retraining is a cost line item.</li>
                <li>Black-box by construction. Even the builders can't fully explain output.</li>
                <li>Pattern-completion. Powerful at correlation, weak at cause.</li>
                <li>Domain-specific. Each problem ships its own model and team.</li>
                <li>Optimized to the loss function. Long-term consequence absent.</li>
                <li>Ethical alignment retrofit after the fact.</li>
              </ul>
            </div>
            <div className="axiom">
              <h4>The Universal Axiom</h4>
              <ul>
                <li>Continuously adaptive. New data integrates as new context.</li>
                <li>Transparent by construction. Derivation is the output.</li>
                <li>Causal reasoning. Tells you the variable, not just the correlation.</li>
                <li>Domain-agnostic. One reasoning core spans nine industries today.</li>
                <li>Aligned to consequence. Second- and third-order effects modeled in-line.</li>
                <li>Alignment is a layer of the architecture, not a guardrail bolted on.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Deployment */}
      <section className="section">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 04</div>
              <div className="label-title">Deployment</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "22ch" }}>
                Meets your environment where it is.
              </h2>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
            {[
              { label: "Deployment", value: "On-prem · Sovereign · Hybrid" },
              { label: "Integrations", value: "Any frontier model · OpenAI · Anthropic · Google · open source" },
              { label: "Data residency", value: "Customer-controlled. Always." },
              { label: "Provenance", value: "100% derivation-traceable" },
              { label: "Authorization", value: "IL-5 in progress · SOC 2 II" },
              { label: "Latency floor", value: "Sub-second for resolved queries" },
              { label: "Audit", value: "Full inference tree, every output" },
              { label: "Licensing", value: "NAICS 541710 · R&D" },
            ].map((d, i) => (
              <div key={i} style={{ background: "var(--bg-elev)", padding: 28, minHeight: 140 }}>
                <div className="uppercase-label" style={{ marginBottom: 12 }}>{d.label}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1.15 }}>
                  {d.value}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-block">
        <div className="cta-spark">
          {[1, 2, 3, 4, 5, 6, 7].map(i => (
            <div key={i} style={{ width: i * 150, height: i * 150, opacity: 1 - i * 0.13 }} />
          ))}
        </div>
        <div className="shell" style={{ position: "relative", zIndex: 2 }}>
          <h2 className="display" style={{ maxWidth: "16ch", margin: "0 auto 40px" }}>
            See the <em>derivation</em>, not just the answer.
          </h2>
          <p className="lede" style={{ margin: "0 auto 48px", textAlign: "center" }}>
            We'll walk through the Axiom against a problem you actually carry.
          </p>
          <div className="cta-actions">
            <button className="btn" onClick={() => go("contact")}>
              Book a briefing <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => go("use-cases")}>
              See it in your vertical
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.HowItWorks = HowItWorks;