/* ProTGen site — ProT-096 program page */

function ProgramPage({ onRequest }) {
  const ref = useReveal();
  return (
    <div ref={ref}>
      {/* hero — product card */}
      <section className="sec-dark field page-hero">
        <div className="wrap">
          <div className="crumbs">PIPELINE · LEAD PROGRAM · FIRST PROOF POINT</div>
          <div className="split-wide">
            <div>
              <Eyebrow tone="">Lead program</Eyebrow>
              <h1 className="page-h" style={{ marginTop: 22, fontSize: 76 }}>ProT‑096</h1>
              <p className="lead-lg" style={{ marginTop: 18 }}>
                A personalized progenitor T‑cell therapy designed to restore long‑term immune protection — the first disciplined proof point for the platform.
              </p>
              <div className="pill-row" style={{ marginTop: 26 }}>
                <span className="chip chip-dim">Progenitor T‑cell therapy</span>
                <span className="chip chip-dim">Personalized</span>
                <span className="chip chip-dim">Refractory hematologic</span>
              </div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 32 }} onClick={onRequest}>Request diligence briefing <Icon name="arrow" /></button>
            </div>
            <div>
              <div className="card card-dark" style={{ padding: "30px 32px" }}>
                <div className="lbl cyan">Program snapshot</div>
                <div className="stack-sm" style={{ marginTop: 6 }}>
                  {[
                    ["Modality", "Personalized progenitor T‑cell therapy"],
                    ["Indication", "Refractory hematologic malignancies"],
                    ["Mechanism", "Targeted Notch activation"],
                    ["Goal", "Durable immune reconstitution"],
                    ["Stage", "Preclinical · advancing toward IND"],
                  ].map(([k, v]) => (
                    <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 18, padding: "11px 0", borderBottom: "1px solid rgba(255,255,255,.1)" }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".05em", color: "var(--fg-on-dark-3)", textTransform: "uppercase" }}>{k}</span>
                      <span style={{ fontSize: 14.5, color: "var(--bone)", textAlign: "right", fontWeight: 500 }}>{v}</span>
                    </div>
                  ))}
                </div>
                <p className="kicker" style={{ marginTop: 16, color: "var(--fg-on-dark-3)" }}>Stage language is a placeholder pending ProTGen confirmation.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* patient context */}
      <section className="sec">
        <div className="wrap split-aside">
          <div>
            <Eyebrow tone="human">Patient context</Eyebrow>
            <h2 className="sec-h" style={{ marginTop: 24 }}>For patients who have exhausted standard options.</h2>
          </div>
          <div>
            <p className="lead">
              Patients with refractory hematologic malignancies face disease that no longer responds to standard treatment — and immune systems left depleted by that disease and its treatment.
            </p>
            <p className="lead" style={{ marginTop: 18 }}>
              ProT‑096 is designed to address the part modern medicine often leaves behind: rebuilding the durable, functional immune protection these patients need to recover.
            </p>
            <p className="kicker" style={{ marginTop: 22 }}>ProT‑096 is investigational. No claim of clinical benefit or availability is made.</p>
          </div>
        </div>
      </section>

      {/* approach — 3 step */}
      <section className="sec sec-bone">
        <div className="wrap">
          <SectionHead label="The approach" title="Personalized, targeted, designed to reconstitute." maxw="30ch" />
          <div className="grid-3" style={{ marginTop: 44 }}>
            {[
              ["01", "Targeted activation", "Apply targeted Notch activation to direct cell fate toward progenitor T cells."],
              ["02", "Personalized therapy", "A therapy built for the individual patient, manufactured with reproducible quality."],
              ["03", "Durable reconstitution", "Aim for a restored, diverse repertoire — durable immune protection, not transient effect."],
            ].map(([n, h, p]) => (
              <div className="card hoverable" key={n}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--teal)", letterSpacing: ".04em" }}>{n}</span>
                <h3 style={{ marginTop: 14 }}>{h}</h3>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* development path — milestone timeline */}
      <section className="sec sec-dark">
        <div className="wrap">
          <SectionHead label="Development path" tone="" title="A milestone sequence that creates value at each step." maxw="32ch" />
          <div className="card card-dark" style={{ marginTop: 40, padding: "20px 36px" }}>
            <div className="milestones milestones-dark">
              {window.MILESTONES.map((m, i) => (
                <div className="mrow" key={i} style={{ borderColor: "rgba(255,255,255,.1)" }}>
                  <div className="mphase" style={{ color: "var(--fg-on-dark-3)" }}>{m.phase}</div>
                  <div className="mline">
                    <div className={"mdot " + m.status} />
                    {i < window.MILESTONES.length - 1 && <div className="mbar" style={{ background: "rgba(255,255,255,.16)" }} />}
                  </div>
                  <div className="mbody">
                    <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: 5 }}>
                      <h4 style={{ margin: 0, color: "var(--bone)" }}>{m.h}</h4>
                      <span className={"chip chip-status " + (m.status === "on" ? "on" : m.status === "next" ? "next" : "future")}>
                        {m.status === "on" ? "De‑risked" : m.status === "next" ? "In progress" : "Next"}
                      </span>
                    </div>
                    <p style={{ color: "var(--fg-on-dark-2)" }}>{m.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* proof stack — how it validates the platform */}
      <section className="sec">
        <div className="wrap">
          <SectionHead label="Why it matters" title="The bridge from platform belief to clinical evidence." lead="ProT‑096 is the first disciplined test of a larger thesis — not the whole company." maxw="38ch" />
          <div className="grid-4" style={{ marginTop: 44 }}>
            {[
              ["Necessary", "A real unmet need", "Refractory patients with depleted immunity and few options."],
              ["Differentiated", "A targeted mechanism", "Targeted Notch activation as a precise, controllable lever."],
              ["Testable", "A focused first wedge", "A measurable, evaluable population and development path."],
              ["Manufacturable", "Built to be made", "Automated manufacturing and QC through the Cellares partnership."],
            ].map(([k, h, p]) => (
              <div className="card claim-card hoverable" key={k}>
                <div className="lbl">{k}</div>
                <h3 style={{ fontSize: 19 }}>{h}</h3>
                <div className="evidence"><Icon name="check" size={16} /><span>{p}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand onRequest={onRequest}
        title="Underwrite a sequence, not a leap of faith."
        lead="We'd welcome diligence on the IND path, CMC, biomarkers, and value‑inflection milestones."
        primary="Request diligence briefing" />
    </div>
  );
}

Object.assign(window, { ProgramPage });