/* ============================================================
   Philosophy
   ============================================================ */

function Philosophy({ go }) {
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 80, paddingBottom: 60 }}>
        <div className="shell">
          <div className="bracketed" style={{ marginBottom: 28 }}>PHILOSOPHY · i4ANEYE INC.</div>
          <h1 className="heading-xl" style={{ maxWidth: "22ch", marginBottom: 32 }}>
            We didn't set out to build <em style={{ color: "var(--accent)", fontStyle: "italic" }}>another</em> model. We set out to understand what intelligence is.
          </h1>
          <p className="lede" style={{ maxWidth: "60ch" }}>
            i4ANeYe is an R&amp;D enterprise. EpiphanyEngine is its first commercial system.
            The mission is older than the product: empower any organization — and any individual —
            to delve into the depths of their own reasoning, and emerge with sharper tools to
            understand the world they are deciding within.
          </p>
        </div>
      </section>

      <section style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", padding: "100px 0" }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="phil-quote-grid">
            <div>
              <p className="phil-quote">
                "Intelligence isn't something we <em>possess</em>. It's something we <em>participate in</em>."
              </p>
              <div className="phil-meta">— FROM THE FOUNDING MANIFEST</div>
            </div>
            <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
              <div style={{
                position: "relative", width: "min(360px, 70vw)", aspectRatio: "1",
              }}>
                {[1, 2, 3, 4, 5].map(i => (
                  <div key={i} style={{
                    position: "absolute",
                    inset: `${(5 - i) * 8}%`,
                    border: i === 3 ? "1px solid var(--accent)" : "1px solid var(--rule)",
                    borderRadius: "50%",
                    opacity: i === 3 ? 1 : 0.5,
                  }} />
                ))}
                <div style={{
                  position: "absolute", left: "50%", top: "50%",
                  transform: "translate(-50%, -50%)",
                  width: 12, height: 12, borderRadius: "50%", background: "var(--accent)",
                  boxShadow: "0 0 0 6px var(--accent-soft)"
                }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Three pillars */}
      <section className="section">
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 01</div>
              <div className="label-title">What we believe</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "20ch" }}>
                Three commitments the work refuses to violate.
              </h2>
            </div>
          </div>

          <div className="phil-pillars">
            <div className="phil-pillar">
              <div className="p-num">01 · TRANSPARENCY</div>
              <h3>Derivation, not decree.</h3>
              <p>
                A system that cannot explain how it reached an answer is a system that cannot
                be held to one. The Axiom ships its reasoning chain alongside every output.
                If we can't show you the work, we don't ship the work.
              </p>
            </div>
            <div className="phil-pillar">
              <div className="p-num">02 · ALIGNMENT</div>
              <h3>Ethics in the architecture.</h3>
              <p>
                Alignment is not a guardrail bolted onto a finished model. In the Axiom it is
                a layer of the architecture itself — the Why-Axis and Subjectivity Scale through
                which every inference must pass before it returns to you.
              </p>
            </div>
            <div className="phil-pillar">
              <div className="p-num">03 · OPEN AT THE CORE</div>
              <h3>Inspectable, not obfuscated.</h3>
              <p>
                The Axiom core algorithm is open. It is the rare commercial system whose
                foundational mechanism anyone can verify, contribute to, and challenge.
                Real intelligence is what survives that scrutiny — not what hides from it.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Founder */}
      <section className="section" style={{ borderTop: "1px solid var(--rule)" }}>
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 02</div>
              <div className="label-title">The founder</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "22ch" }}>
                A practitioner first. A philosopher because the work demanded it.
              </h2>
            </div>
          </div>

          <div className="founder-grid">
            <div style={{ maxWidth: "60ch", margin: "0 auto" }}>
              <div className="uppercase-label" style={{ marginBottom: 16 }}>Matt Belanger · Founder &amp; Creator</div>
              <p className="body-text" style={{ marginBottom: 20 }}>
                <strong>Matt founded i4ANeYe</strong> after a decade-long pursuit of the question that
                most ML practitioners deliberately set aside: <em>what is the structure of the
                reasoning we're modeling?</em>
              </p>
              <p className="body-text" style={{ marginBottom: 20 }}>
                The Universal Axiom is the answer he and the team arrived at — a framework in which
                impulses, elements, and pressures form the attention mechanism, in which growth and
                stability are held in productive tension, and in which the question of why an
                inference was made is a first-class output rather than a research afterthought.
              </p>
              <p className="body-text">
                The work is open at the core because, as he puts it, <em>"the test of an intelligence
                framework is whether it survives the scrutiny of every domain it touches. You can't
                survive scrutiny you've hidden from."</em>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline / milestones */}
      <section style={{ paddingTop: 60, paddingBottom: 100, borderTop: "1px solid var(--rule)" }}>
        <div className="shell">
          <div className="section-label">
            <div>
              <div className="num">— 03</div>
              <div className="label-title">The arc</div>
            </div>
            <div>
              <h2 className="heading-lg" style={{ maxWidth: "20ch" }}>From principle to system to deployment.</h2>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
            {[
              { year: "2019", title: "First principles", text: "The reasoning that became the Axiom is sketched against problems in physics, neuroscience, and economics." },
              { year: "2022", title: "Universal Axiom v1", text: "First formal mathematical statement. Initial proofs against the International Mathematics Olympiad corpus." },
              { year: "2024", title: "EpiphanyEngine launch", text: "Commercial integration alongside GPT-4o. First enterprise pilots in financial services and healthcare." },
              { year: "2026", title: "Sovereign deployments", text: "On-prem and air-gapped deployments online. IL-5 authorization in progress. Nine verticals deployed." },
            ].map((m, i) => (
              <div key={i} style={{ background: "var(--bg-elev)", padding: 32, minHeight: 220, display: "flex", flexDirection: "column" }}>
                <div className="uppercase-label" style={{ color: "var(--accent)", marginBottom: 20 }}>{m.year}</div>
                <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "-0.01em", marginBottom: 12, lineHeight: 1.1 }}>{m.title}</h4>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>{m.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-block">
        <div className="shell">
          <h2 className="display" style={{ maxWidth: "16ch", margin: "0 auto 40px" }}>
            <em>Encompass</em> relativity. One spark at a time.
          </h2>
          <div className="cta-actions">
            <button className="btn" onClick={() => go("contact")}>
              Begin the conversation <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Philosophy = Philosophy;