/* ============================================================
   Home page
   ============================================================ */

function Home({ go }) {
  return (
    <div className="page-enter">
      <section className="hero">
        <div className="shell" style={{ position: "relative" }}>
          {/* spark visual */}
          <div className="spark" aria-hidden="true">
            {Array.from({ length: 8 }).map((_, i) => (
              <div
                key={i}
                className="spark-ring"
                style={{
                  inset: `${i * 8}%`,
                  opacity: 0.8 - i * 0.1,
                  borderColor: i === 2 ? "color-mix(in oklch, var(--accent) 60%, transparent)" : "var(--rule)",
                }}
              />
            ))}
          </div>

          <div className="hero-grid">
            <div>
              <div className="hero-meta">
                <span className="hero-meta-dot"></span>
                <span className="uppercase-label">The Universal Axiom · v3.2</span>
                <span style={{ color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em" }}>
                  · ENTERPRISE
                </span>
              </div>
              <h1 className="display hero-display">
                Decisions that hold up. Reasoning you can <em>defend.</em>
              </h1>
              <p className="lede" style={{ marginBottom: 40 }}>
                The Epiphany Engine is a reasoning system for enterprises that have outgrown
                pattern-matching. Where standard AI returns an answer, The Universal Axiom returns the
                derivation — every output traceable to the variables that produced it.
              </p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                <button className="btn" onClick={() => go("contact")}>
                  Book a briefing <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => go("how")}>
                  See how it works
                </button>
              </div>
            </div>

            <aside className="hero-aside">
              <div className="uppercase-label label">From the manifest</div>
              <p>
                "Intelligence is not a product to be prepackaged.
                It is what happens when a system can reason about
                the pressures producing the answer, not just the answer itself."
              </p>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-3)" }}>
                — MATT BELANGER, FOUNDER
              </div>
            </aside>
          </div>
        </div>
      </section>

      <Ticker items={[
        "AUDITABLE BY DEFAULT",
        "ON-PREM CAPABLE",
        "SOVEREIGN-CLOUD READY",
        "DETERMINISTIC WHERE IT MATTERS",
        "DERIVATION-FIRST",
        "INTEGRATES WITH ANY FRONTIER MODEL",
        "OPENAI · ANTHROPIC · GOOGLE · META · OPEN SOURCE",
        "ROOTED IN FIRST-PRINCIPLES MATHEMATICS",
        "BUILT BY i4ANeYe INC.",
      ]} />

      {/* What it is */}
      <section className="section">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 01</div>
              <div className="label-title">The Shift</div>
            </div>
            <div>
              <h2 className="heading-xl" style={{ marginBottom: 28, maxWidth: "18ch" }}>
                Most enterprise AI tells you <em style={{ color: "var(--accent)", fontStyle: "italic" }}>what</em>.
                The Axiom tells you <em style={{ color: "var(--accent)", fontStyle: "italic" }}>why</em>.
              </h2>
              <p className="lede">
                Transformers compress text. Statistical models compress data. Neither was designed
                to reason about the system producing either. The Universal Axiom is a different
                class of model — one built around the pressures, impulses, and structural relationships
                that actually generate outcomes. The output is not a prediction. It is an explanation.
              </p>
            </div>
          </div>

          <div className="rule" style={{ margin: "60px 0" }}></div>

          <div className="how-preview">
            <div className="how-step">
              <div className="step-num">01 / INGEST</div>
              <h3 className="step-h">Read the field whole.</h3>
              <p className="step-t">
                Structured data, unstructured documents, time-series, expert
                interviews — taken as one continuous surface rather than
                stacks of inputs.
              </p>
            </div>
            <div className="how-step">
              <div className="step-num">02 / RESOLVE</div>
              <h3 className="step-h">Find the structure underneath.</h3>
              <p className="step-t">
                The Axiom decomposes the surface into the variables actually
                driving it: impulses, elements, pressures, temporal evolution.
              </p>
            </div>
            <div className="how-step">
              <div className="step-num">03 / RETURN</div>
              <h3 className="step-h">Output the derivation.</h3>
              <p className="step-t">
                Every recommendation arrives with its reasoning chain. Defensible
                to a regulator, a board, a peer reviewer, an adversary.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Use cases preview */}
      <section className="section-tight">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 02</div>
              <div className="label-title">In Place</div>
            </div>
            <div>
              <h2 className="heading-xl" style={{ marginBottom: 16, maxWidth: "20ch" }}>
                Deployed across nine industries where the cost of an unexplained decision is the highest.
              </h2>
            </div>
          </div>

          <div className="usecase-grid">
            {VERTICALS.map((v) => (
              <button key={v.id} className="usecase-card" onClick={() => go("use-cases", v.id)}>
                <div className="uc-n">{v.num}</div>
                <div className="uc-h">{v.name}</div>
                <div className="uc-bottom">
                  <span>{v.short}</span>
                </div>
                <div className="uc-bottom" style={{ marginTop: 4 }}>
                  Read use case <span>→</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* What enterprise gets */}
      <section className="section">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 03</div>
              <div className="label-title">What you get</div>
            </div>
            <div>
              <h2 className="heading-xl" style={{ marginBottom: 16, maxWidth: "18ch" }}>
                A reasoning core for the decisions you can't afford to make twice.
              </h2>
            </div>
          </div>

          <div className="hiw-compare">
            <div className="traditional">
              <h4>Conventional Enterprise AI</h4>
              <ul>
                <li>Pre-trained on yesterday's data. Static, narrow, expensive to retrain.</li>
                <li>Opacity by design. Black-box outputs you have to defend without seeing.</li>
                <li>Pattern-matching. Reports what happened, can't reason about what will.</li>
                <li>Siloed by domain. Each problem needs its own model and its own team.</li>
                <li>Optimized for short-term performance. Long-term consequences invisible.</li>
              </ul>
            </div>
            <div className="axiom">
              <h4>Axiom-Core Reasoning</h4>
              <ul>
                <li>Continuously adapts. New data integrates as new context, not retraining cost.</li>
                <li>Derivation as a first-class output. Every inference traceable to source.</li>
                <li>Causal at the core. Why-this-happened is the answer, not a footnote.</li>
                <li>One model, many domains. Cross-disciplinary by structure, not by integration.</li>
                <li>Temporal alignment. Second- and third-order consequences modeled in-line.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Quote / philosophy bridge */}
      <section className="section-tight" style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 60, alignItems: "start" }}>
            <div className="uppercase-label">— 04 · Manifest</div>
            <div>
              <p className="heading-xl serif" style={{ maxWidth: "26ch", marginBottom: 32 }}>
                "The future of intelligence won't belong to systems that <em style={{ color: "var(--accent)", fontStyle: "italic" }}>retrieve</em>.
                It will belong to those that can <em style={{ color: "var(--accent)", fontStyle: "italic" }}>reason about</em> what they return — and survive the questioning that follows."
              </p>
              <div className="uppercase-label">Matt Belanger · Founder, i4ANeYe Inc.</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-block">
        <div className="cta-spark">
          {[1, 2, 3, 4, 5, 6, 7].map(i => (
            <div key={i} style={{
              width: i * 160, height: i * 160,
              opacity: 1 - i * 0.13,
            }} />
          ))}
        </div>
        <div className="shell" style={{ position: "relative", zIndex: 2 }}>
          <div className="bracketed" style={{ marginBottom: 32 }}>FOR ENTERPRISE LEADERSHIP</div>
          <h2 className="display" style={{ maxWidth: "16ch", margin: "0 auto 40px" }}>
            See the system <em>before</em> the system sees you.
          </h2>
          <p className="lede" style={{ margin: "0 auto 48px", textAlign: "center" }}>
            Briefings are forty minutes. Half is your situation; half is what the Axiom
            would do with it. No deck, no sales motion. Just the work.
          </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")}>
              Read the use cases
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Home = Home;