/* ProTGen site — Platform page */

function PlatformPage({ onRequest }) {
  const ref = useReveal();
  const [layer, setLayer] = React.useState("notch");
  const layers = {
    notch: {
      label: "Targeted Notch activation",
      h: "An enabling control point, activated with precision.",
      p: "Notch signaling governs cell‑fate decisions in immune development. Historically it was considered undruggable for therapeutic activation. ProTGen's platform is built around targeted, controlled activation — turning on the right signal, in the right place — rather than systemic pathway modulation.",
      points: ["Targeted rather than systemic", "Programmable cell‑fate control", "Works in vivo and ex vivo"],
      motif: <GateMotif size={300} />,
    },
    thymic: {
      label: "Thymic reactivation",
      h: "Restart the body's repertoire‑building machinery.",
      p: "The thymus is the control point for generating a diverse T‑cell repertoire. Reactivating foundational immune‑development pathways is the lever for durable protection — rebuilding capacity rather than substituting for it.",
      points: ["Foundational immune‑development pathways", "Diverse repertoire generation", "Durable, not transient, protection"],
      motif: <ThymicArch size={300} />,
    },
    repertoire: {
      label: "Immune repertoire rebuilding",
      h: "From depleted and fragmented to diverse and functional.",
      p: "Immune competence is not a single cell type — it is a diverse, functional repertoire able to recognize and respond. The platform aims to restore that breadth, reconstituting adaptive immunity after disease, treatment, or age has depleted it.",
      points: ["Breadth and diversity restored", "Functional adaptive immunity", "Measurable reconstitution"],
      motif: <ConstellationMotif animate={false} />,
    },
  };
  const L = layers[layer];
  return (
    <div ref={ref}>
      {/* page hero */}
      <section className="sec-dark field page-hero">
        <div className="wrap">
          <div className="crumbs">PLATFORM · TARGETED NOTCH ACTIVATOR PLATFORM</div>
          <div className="split-wide">
            <div>
              <Eyebrow tone="">The platform</Eyebrow>
              <h1 className="page-h" style={{ marginTop: 22 }}>A platform to program immune cell fate.</h1>
              <p className="lead-lg" style={{ marginTop: 22 }}>
                Targeted Notch activators that reactivate immune‑development pathways and rebuild a diverse, functional adaptive repertoire.
              </p>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 32 }} onClick={onRequest}>Request scientific overview <Icon name="arrow" /></button>
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}><GateMotif size={360} /></div>
          </div>
        </div>
      </section>

      {/* mechanism in three layers */}
      <section className="sec">
        <div className="wrap">
          <SectionHead label="How it works" title="Three layers of the same idea: rebuild, don't decorate." lead="Each layer adds depth. Read the headline, or go deeper." maxw="38ch" />
          <div className="tabs" style={{ marginTop: 34 }}>
            {Object.entries(layers).map(([k, v]) => (
              <button key={k} className={"tab" + (k === layer ? " active" : "")} onClick={() => setLayer(k)}>{v.label}</button>
            ))}
          </div>
          <div className="card" style={{ marginTop: 26, padding: 0, overflow: "hidden" }}>
            <div className="split" style={{ gap: 0 }}>
              <div style={{ padding: "44px 46px" }}>
                <div className="lbl">{L.label}</div>
                <h3 className="sub-h">{L.h}</h3>
                <p style={{ fontSize: 17, lineHeight: 1.62, color: "var(--fg-2)", margin: "0 0 22px" }}>{L.p}</p>
                <div className="stack-sm">
                  {L.points.map((pt, i) => (
                    <div className="flex-row" key={i} style={{ gap: 11 }}>
                      <span style={{ color: "var(--teal)", display: "flex" }}><Icon name="check" size={18} /></span>
                      <span style={{ fontSize: 15.5, color: "var(--fg-1)", fontWeight: 500 }}>{pt}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ background: "radial-gradient(120% 90% at 70% 20%,#0C3A47,#071D26)", display: "flex", alignItems: "center", justifyContent: "center", padding: 36, minHeight: 360 }}>
                {L.motif}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* targeted vs systemic */}
      <section className="sec sec-bone">
        <div className="wrap">
          <SectionHead label="The distinction that matters" title="Targeted activation, not systemic modulation." maxw="28ch" />
          <div className="grid-2" style={{ marginTop: 44 }}>
            <div className="card" style={{ padding: "34px 36px" }}>
              <div className="lbl plain" style={{ color: "var(--slate)" }}>The conventional concern</div>
              <h3 className="sub-h" style={{ fontSize: 24 }}>“Notch is powerful but risky.”</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)", margin: 0 }}>
                Broad pathway modulation raises legitimate questions about control and specificity. That concern is the right one to hold.
              </p>
            </div>
            <div className="card" style={{ padding: "34px 36px", borderColor: "var(--teal)", borderWidth: 1 }}>
              <div className="lbl">ProTGen's answer</div>
              <h3 className="sub-h" style={{ fontSize: 24 }}>Precision is the point.</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)", margin: 0 }}>
                The platform is engineered for targeted, controlled activation — the right signal, at the right place — so the biology becomes therapeutically useful, not just biologically interesting.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* platform horizon */}
      <section className="sec sec-dark">
        <div className="wrap">
          <SectionHead label="Platform horizon" tone="" title="A disciplined wedge into a broad opportunity." lead="The horizon is named as option value — not a lead claim. Everything is anchored in the first proof point." maxw="40ch" />
          <div className="grid-3" style={{ marginTop: 44 }}>
            <div className="card card-dark"><div className="lbl cyan">Now</div><h3>Oncology</h3><p>Refractory hematologic malignancies — the first clinical wedge with ProT‑096.</p></div>
            <div className="card card-dark"><div className="lbl cyan">Horizon</div><h3>Regenerative medicine</h3><p>Rebuilding immune capacity after depletion in other settings.</p></div>
            <div className="card card-dark"><div className="lbl cyan">Horizon</div><h3>Age‑related immune decline</h3><p>Restoring competence as adaptive immunity wanes — a disciplined long‑term direction.</p></div>
          </div>
          <p className="kicker" style={{ marginTop: 28, color: "var(--fg-on-dark-3)" }}>
            Horizon directions are illustrative of platform option value and are not active clinical programs.
          </p>
        </div>
      </section>

      {/* scientific note + cta */}
      <section className="sec">
        <div className="wrap-narrow center">
          <p className="serif-idea" style={{ maxWidth: "26ch", margin: "0 auto" }}>
            A large category, anchored by a focused first clinical wedge.
          </p>
          <div className="flex-row" style={{ justifyContent: "center", marginTop: 34 }}>
            <button className="btn btn-primary btn-lg" onClick={onRequest}>Request scientific overview <Icon name="arrow" /></button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("program")}>See ProT‑096</button>
          </div>
          <p className="kicker" style={{ marginTop: 28 }}>
            Mechanism diagrams here are narrative abstractions, deliberately simplified. Figures for scientific diligence are reviewed for accuracy before use.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PlatformPage });