/* ProTGen site — Homepage */

/* ---------- HERO (3 variants) ---------- */
function HomeHero({ onRequest, variant }) {
  const copy = (
    <div>
      <Eyebrow>Precision immunology</Eyebrow>
      <h1 className="hero" style={{ marginTop: 24 }}>Restore immune<br/>competence.</h1>
      <p className="lead-lg" style={{ marginTop: 24 }}>
        ProTGen is developing targeted Notch activators to rebuild durable, adaptive immune protection — beginning with ProT‑096.
      </p>
      <div className="flex-row" style={{ marginTop: 36 }}>
        <button className="btn btn-primary btn-lg" onClick={onRequest}>Request a briefing <Icon name="arrow" /></button>
        <button className="btn btn-on-dark btn-lg" onClick={() => go("platform")}>Read the science</button>
      </div>
      <div className="flex-row" style={{ marginTop: 30, gap: 22 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".06em", color: "var(--fg-on-dark-3)" }}>LEAD PROGRAM · PROT‑096</span>
        <span style={{ width: 1, height: 14, background: "rgba(255,255,255,.18)" }} />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".06em", color: "var(--fg-on-dark-3)" }}>REFRACTORY HEMATOLOGIC MALIGNANCIES</span>
      </div>
    </div>
  );

  if (variant === "restoration") {
    return (
      <section className="sec sec-dark field" id="top" style={{ paddingTop: 96, paddingBottom: 92 }}>
        <div className="wrap" style={{ textAlign: "center", maxWidth: 980 }}>
          <Eyebrow tone="">Precision immunology</Eyebrow>
          <h1 className="hero" style={{ marginTop: 26, fontSize: 88, marginLeft: "auto", marginRight: "auto" }}>Restore immune competence.</h1>
          <p className="lead-lg" style={{ margin: "26px auto 0", maxWidth: "52ch", textAlign: "center" }}>
            Targeted Notch activators designed to rebuild durable, adaptive immune protection — beginning with ProT‑096.
          </p>
          <div style={{ margin: "40px auto 0", maxWidth: 560 }}><RestorationField /></div>
          <div className="flex-row" style={{ justifyContent: "center", marginTop: 36 }}>
            <button className="btn btn-primary btn-lg" onClick={onRequest}>Request a briefing <Icon name="arrow" /></button>
            <button className="btn btn-on-dark btn-lg" onClick={() => go("platform")}>Read the science</button>
          </div>
        </div>
      </section>
    );
  }
  if (variant === "gate") {
    return (
      <section className="sec sec-dark field" id="top" style={{ paddingTop: 92, paddingBottom: 96 }}>
        <div className="wrap split-wide">
          <div style={{ display: "flex", justifyContent: "center", order: 0 }}><GateMotif size={400} /></div>
          {copy}
        </div>
      </section>
    );
  }
  // constellation (default)
  return (
    <section className="sec sec-dark field" id="top" style={{ paddingTop: 92, paddingBottom: 96 }}>
      <div className="wrap split-wide">
        {copy}
        <div style={{ display: "flex", justifyContent: "center" }}><ConstellationMotif /></div>
      </div>
    </section>
  );
}

/* ---------- PROBLEM ---------- */
function HomeProblem() {
  return (
    <section className="sec" id="problem">
      <div className="wrap">
        <div className="split-aside">
          <div>
            <Eyebrow>The problem</Eyebrow>
            <h2 className="sec-h" style={{ marginTop: 24, fontSize: 50, maxWidth: "18ch" }}>
              Medicine attacks disease well. It rebuilds immunity poorly.
            </h2>
          </div>
          <div>
            <p className="serif-idea">
              Modern medicine has become increasingly good at attacking disease — and far less capable of rebuilding the immune systems that disease, treatment, and age leave behind.
            </p>
            <p className="lead" style={{ marginTop: 24 }}>
              Patients with compromised immune systems need more than disease control. They need durable immune recovery — a diverse, functional repertoire restored after it has been depleted.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- CATEGORY ---------- */
function HomeCategory() {
  return (
    <section className="sec sec-bone" id="category">
      <div className="wrap">
        <SectionHead label="The category" title="A new therapeutic frontier, not a minor variation." maxw="34ch" />
        <p className="lead measure" style={{ marginTop: 18, marginBottom: 44 }}>
          The missed opportunity is not simply a new mechanism. It is a new therapeutic job: don't just kill the disease — rebuild the immune system that must protect the patient afterward.
        </p>
        <WhitespaceMap />
      </div>
    </section>
  );
}

/* ---------- BELIEF ---------- */
function HomeBelief({ beliefVariant }) {
  return (
    <section className="sec sec-dark" id="belief" style={{ background: "var(--ink)" }}>
      <div className="wrap">
        <SectionHead label="The belief sequence" tone="" title="Why this biology, this platform, this first product — and why now." lead="The argument builds one belief at a time. Each step earns the next." maxw="40ch" />
        <BeliefSequence variant={beliefVariant} dark />
      </div>
    </section>
  );
}

/* ---------- PLATFORM mechanism (3 variants) ---------- */
function MechanismDiagram({ variant }) {
  const Node = ({ cx, cy, fill, r = 3.2 }) => <circle cx={cx} cy={cy} r={r} fill={fill} />;
  if (variant === "thymic") {
    return <div style={{ display: "flex", justifyContent: "center" }}><ThymicArch size={340} /></div>;
  }
  if (variant === "beforeafter") {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 30, flexWrap: "wrap" }}>
        <div style={{ textAlign: "center" }}>
          <svg width="170" height="170" viewBox="0 0 96 96" fill="none">
            <Node cx="30" cy="38" fill="#3A535B" r="3"/><Node cx="58" cy="30" fill="#3A535B" r="3"/><Node cx="44" cy="60" fill="#3A535B" r="3"/><Node cx="66" cy="56" fill="#3A535B" r="3"/>
          </svg>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-on-dark-2)", letterSpacing: ".06em" }}>Depleted repertoire</div>
        </div>
        <svg width="64" height="22" viewBox="0 0 64 22" fill="none"><rect x="0" y="9" width="48" height="4" rx="2" fill="url(#mgr)"/><path d="m44 4 10 7-10 7" stroke="#46CAD3" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/><defs><linearGradient id="mgr" x1="0" x2="48"><stop stopColor="#2A9498"/><stop offset="1" stopColor="#46CAD3"/></linearGradient></defs></svg>
        <div style={{ textAlign: "center" }}>
          <svg width="170" height="170" viewBox="0 0 96 96" fill="none">
            {[30,48,66].map((y)=>[30,48,66].map((x)=>
              <Node key={x+"-"+y} cx={x} cy={y} fill={(x===48&&y===48)?"#46CAD3":"#0F7C80"} r="3.4"/>))}
          </svg>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--cyan)", letterSpacing: ".06em" }}>Restored repertoire</div>
        </div>
      </div>
    );
  }
  // gate (default) — 3-step
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
      <div style={{ textAlign: "center", flex: 1, minWidth: 130 }}>
        <svg width="130" height="130" viewBox="0 0 96 96" fill="none">
          <Node cx="34" cy="40" fill="#3A535B"/><Node cx="58" cy="32" fill="#3A535B"/><Node cx="48" cy="62" fill="#3A535B"/><Node cx="64" cy="58" fill="#3A535B"/>
        </svg>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--fg-on-dark-2)", letterSpacing: ".05em" }}>Depleted</div>
      </div>
      <Icon name="arrow" size={24} />
      <div style={{ textAlign: "center", flex: 1, minWidth: 130 }}>
        <svg width="130" height="130" viewBox="0 0 96 96" fill="none">
          <path d="M30 22 C 44 36, 44 60, 30 74" stroke="#46CAD3" strokeWidth="3" strokeLinecap="round"/>
          <path d="M66 22 C 52 36, 52 60, 66 74" stroke="#2A9498" strokeWidth="3" strokeLinecap="round"/>
          <circle cx="48" cy="48" r="6" fill="#46CAD3"/>
        </svg>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--cyan)", letterSpacing: ".05em" }}>Signal gate opens</div>
      </div>
      <Icon name="arrow" size={24} />
      <div style={{ textAlign: "center", flex: 1, minWidth: 130 }}>
        <svg width="130" height="130" viewBox="0 0 96 96" fill="none">
          {[30,48,66].map((y)=>[30,48,66].map((x)=>
            <Node key={x+"-"+y} cx={x} cy={y} fill={(x===48&&y===48)||(x===66&&y===30)?"#46CAD3":"#0F7C80"}/>))}
        </svg>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--fg-on-dark-2)", letterSpacing: ".05em" }}>Ordered repertoire</div>
      </div>
    </div>
  );
}

function HomePlatform({ mechVariant }) {
  return (
    <section className="sec sec-dark field" id="platform">
      <div className="wrap split">
        <div>
          <Eyebrow tone="">The platform</Eyebrow>
          <h2 className="sec-h" style={{ marginTop: 24 }}>Targeted Notch activation — a once‑undruggable pathway, made targetable.</h2>
          <p className="lead">
            ProTGen's proprietary platform reactivates immune‑development pathways and programs cell fate, in vivo and ex vivo — restoring the body's ability to generate a diverse, functional repertoire.
          </p>
          <button className="btn-link" style={{ marginTop: 26, color: "var(--cyan)" }} onClick={() => go("platform")}>
            Explore the platform <Icon name="arrow" size={16} />
          </button>
        </div>
        <div style={{ padding: "8px 0" }}><MechanismDiagram variant={mechVariant} /></div>
      </div>
    </section>
  );
}

/* ---------- PROGRAM ---------- */
function HomeProgram() {
  return (
    <section className="sec" id="program">
      <div className="wrap">
        <Eyebrow>Lead program · first proof point</Eyebrow>
        <div className="split" style={{ marginTop: 26, alignItems: "start" }}>
          <div>
            <h2 className="sec-h" style={{ fontSize: 68, marginBottom: 14 }}>ProT‑096</h2>
            <p className="lead-lg">A personalized progenitor T‑cell therapy designed to restore long‑term immune protection.</p>
            <div className="pill-row" style={{ marginTop: 24 }}>
              <span className="chip chip-teal">Progenitor T‑cell therapy</span>
              <span className="chip chip-teal">Personalized</span>
              <span className="chip chip-teal">Refractory hematologic</span>
            </div>
            <button className="btn-link" style={{ marginTop: 28 }} onClick={() => go("program")}>See the ProT‑096 page <Icon name="arrow" size={16} /></button>
          </div>
          <div className="stack-sm">
            <div className="card claim-card hoverable">
              <div className="lbl">Patients</div>
              <h3>Refractory hematologic malignancies</h3>
              <p>Patients who have exhausted standard treatment options and need durable immune recovery.</p>
            </div>
            <div className="card claim-card hoverable">
              <div className="lbl">Goal</div>
              <h3>Durable immune recovery</h3>
              <p>Reactivate the thymus; rebuild a diverse, functional adaptive repertoire.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- PROOF PATH ---------- */
function HomeProof() {
  return (
    <section className="sec sec-bone" id="proof">
      <div className="wrap">
        <SectionHead label="The proof path" title="A large category, anchored by a focused first clinical wedge." maxw="30ch" />
        <div style={{ marginTop: 48 }}><ProofBridge /></div>
        <div className="grid-3" style={{ marginTop: 56 }}>
          <div className="card claim-card hoverable">
            <div className="lbl gold">De‑risked</div>
            <h3>A targetable pathway</h3>
            <p>Proprietary Notch activators program cell fate in vivo and ex vivo.</p>
            <div className="evidence"><Icon name="check" size={16} /><span>Platform validated as a control point.</span></div>
          </div>
          <div className="card claim-card hoverable">
            <div className="lbl">In progress</div>
            <h3>Manufacturing & IND</h3>
            <p>Cellares automated manufacturing, integrated QC, and regulatory support.</p>
            <div className="evidence"><Icon name="check" size={16} /><span>Partnership active toward IND.</span></div>
          </div>
          <div className="card claim-card hoverable">
            <div className="lbl cyan">Next value</div>
            <h3>First human proof</h3>
            <p>ProT‑096 in a high‑need, refractory population.</p>
            <div className="evidence"><Icon name="target" size={16} /><span>The next value‑inflection milestone.</span></div>
          </div>
        </div>
        <div className="center" style={{ marginTop: 40 }}>
          <button className="btn btn-ghost" onClick={() => go("investors")}>See the milestone path <Icon name="arrow" size={16} /></button>
        </div>
      </div>
    </section>
  );
}

/* ---------- WHY NOW ---------- */
function HomeWhyNow() {
  const items = [
    { k: "Biology", h: "A targetable pathway", p: "Targeted Notch activation makes a historically undruggable control point usable for therapy." },
    { k: "Manufacturing", h: "Reproducible at scale", p: "Automated manufacturing and QC bring personalized cell therapy within reach of clinical transition." },
    { k: "Clinical need", h: "An unmet, evaluable population", p: "Refractory hematologic malignancies offer a high‑need, measurable first wedge." },
  ];
  return (
    <section className="sec" id="whynow">
      <div className="wrap">
        <SectionHead label="Why now" title="Biology, manufacturing, and clinical need are converging." maxw="28ch" />
        <div className="grid-3" style={{ marginTop: 44 }}>
          {items.map((it) => (
            <div className="card hoverable" key={it.k}>
              <div className="lbl">{it.k}</div>
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- MANUFACTURING ---------- */
function HomeManufacturing() {
  return (
    <section className="sec sec-navy" id="manufacturing">
      <div className="wrap split">
        <div>
          <Eyebrow tone="">Manufacturing & CMC</Eyebrow>
          <h2 className="sec-h" style={{ marginTop: 24 }}>Precision manufacturing, built for the clinic.</h2>
          <p className="lead">
            ProT‑096 demands reproducibility, process consistency, and cost efficiency beyond manual methods. ProTGen's partnership with Cellares applies automated manufacturing and quality control, with regulatory support toward IND submission.
          </p>
        </div>
        <div className="grid-2">
          <div className="card card-dark hoverable"><div className="lbl">Automated</div><h3>Manufacturing platform</h3><p>Reproducible process at clinical scale.</p></div>
          <div className="card card-dark hoverable"><div className="lbl">Quality</div><h3>Integrated QC</h3><p>Consistency and cost efficiency by design.</p></div>
          <div className="card card-dark hoverable"><div className="lbl">Regulatory</div><h3>IND preparation</h3><p>Support toward drafting the IND application.</p></div>
          <div className="card card-dark hoverable"><div className="lbl">Scale</div><h3>Designed to expand</h3><p>A path beyond the first program.</p></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- DOORWAYS ---------- */
function HomeDoorways({ onOpen }) {
  const ref = useReveal();
  return (
    <section className="sec sec-bone" id="doorways" ref={ref}>
      <div className="wrap">
        <SectionHead label="Where you come in" title="Built to be understood — and retold." lead="The same story, four doors in. Each audience needs different proof to act." maxw="36ch" />
        <div style={{ marginTop: 44 }}><DoorwayCards onOpen={onOpen} /></div>
      </div>
    </section>
  );
}

/* ---------- TEAM TEASER ---------- */
function HomeTeam() {
  return (
    <section className="sec" id="teamteaser">
      <div className="wrap split-aside">
        <div>
          <Eyebrow>The team</Eyebrow>
          <h2 className="sec-h" style={{ marginTop: 24 }}>People capable of translating this biology into medicine.</h2>
        </div>
        <div>
          <p className="lead">
            ProTGen pairs scientific depth in Notch biology and immune reconstitution with the clinical, CMC, and regulatory discipline required to cross from promise to program.
          </p>
          <button className="btn btn-ghost" style={{ marginTop: 26 }} onClick={() => go("about")}>Meet the team <Icon name="arrow" size={16} /></button>
        </div>
      </div>
    </section>
  );
}

/* ---------- HOME ASSEMBLY with reorderable narrative ---------- */
function HomePage({ onRequest, onDoorway, tweaks }) {
  const ref = useReveal();
  const sectionMap = {
    problem: <HomeProblem key="problem" />,
    category: <HomeCategory key="category" />,
    belief: <HomeBelief key="belief" beliefVariant={tweaks.belief} />,
    platform: <HomePlatform key="platform" mechVariant={tweaks.mech} />,
    program: <HomeProgram key="program" />,
    proof: <HomeProof key="proof" />,
    whynow: <HomeWhyNow key="whynow" />,
    manufacturing: <HomeManufacturing key="manufacturing" />,
  };
  const ORDERS = {
    problem:  ["problem","category","belief","platform","program","proof","whynow","manufacturing"],
    category: ["category","problem","belief","platform","program","proof","whynow","manufacturing"],
    program:  ["program","problem","category","belief","platform","proof","manufacturing","whynow"],
  };
  const order = ORDERS[tweaks.order] || ORDERS.problem;
  return (
    <div ref={ref}>
      <HomeHero onRequest={onRequest} variant={tweaks.hero} />
      {order.map((k) => sectionMap[k])}
      <HomeDoorways onOpen={onDoorway} />
      <HomeTeam />
      <CTABand onRequest={onRequest}
        title="A new platform for immune reconstitution."
        lead="We'd value a focused diligence conversation as ProT‑096 advances toward IND." />
    </div>
  );
}

Object.assign(window, { HomePage });