/* ProTGen site — About, Resources, Article, Contact */

/* ============================ ABOUT / TEAM ============================ */
function AboutPage({ onRequest }) {
  const ref = useReveal();
  return (
    <div ref={ref}>
      <section className="sec-dark field page-hero">
        <div className="wrap">
          <div className="crumbs">ABOUT · TEAM</div>
          <div style={{ maxWidth: 820 }}>
            <Eyebrow tone="">About ProTGen</Eyebrow>
            <h1 className="page-h" style={{ marginTop: 22 }}>A category‑building precision biotechnology company.</h1>
            <p className="lead-lg" style={{ marginTop: 22 }}>
              ProTGen exists to restore immune competence — rebuilding the adaptive immune protection that disease, treatment, and age leave behind.
            </p>
          </div>
        </div>
      </section>

      {/* mission */}
      <section className="sec">
        <div className="wrap split">
          <div>
            <Eyebrow>What we're building</Eyebrow>
            <h2 className="sec-h" style={{ marginTop: 22 }}>One large category, one disciplined first wedge.</h2>
          </div>
          <div>
            <p className="lead">
              The foundational technology is a proprietary Targeted Notch Activator Platform that can program cell fate in vivo and ex vivo — unlocking a signaling pathway historically considered undruggable.
            </p>
            <p className="lead" style={{ marginTop: 18 }}>
              The strategic aim is to reactivate the thymus and rebuild a diverse, functional adaptive immune repertoire, beginning with ProT‑096 in refractory hematologic malignancies.
            </p>
          </div>
        </div>
      </section>

      {/* values / how we operate */}
      <section className="sec sec-bone">
        <div className="wrap">
          <SectionHead label="How we operate" title="Discipline over hype." maxw="22ch" />
          <div className="grid-3" style={{ marginTop: 44 }}>
            {[
              ["Precision", "Targeted activation, not systemic modulation. The right signal, in the right place."],
              ["Proof", "Claims paired with evidence. We state stage, proof, and next milestone plainly."],
              ["Portability", "A story built to travel — legible to a serious audience without the founder in the room."],
            ].map(([h, p]) => (
              <div className="card" key={h}>
                <div className="lbl">{h}</div>
                <p style={{ fontSize: 16, lineHeight: 1.6 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* team grid */}
      <section className="sec">
        <div className="wrap">
          <SectionHead label="The team" title="Science and execution, together." lead="Team roster shown with placeholders pending ProTGen confirmation." maxw="30ch" />
          <div className="team-grid" style={{ marginTop: 44 }}>
            {window.TEAM.map((p) => (
              <div className="person" key={p.name}>
                <div className="portrait">
                  <span className="ph">{p.real ? "PORTRAIT" : "PLACEHOLDER"}</span>
                </div>
                <h3 className="pname">{p.name}</h3>
                <div className="prole">{p.role}</div>
                <p className="pbio">{p.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* partner */}
      <section className="sec sec-navy">
        <div className="wrap split-aside">
          <div>
            <Eyebrow tone="">Named partner</Eyebrow>
            <h2 className="sec-h" style={{ marginTop: 22 }}>Cellares — manufacturing & IND support.</h2>
          </div>
          <div>
            <p className="lead">
              ProTGen's partnership with Cellares applies automated manufacturing, integrated quality control, and IND‑preparation regulatory support — bringing personalized progenitor T‑cell therapy within reach of clinical transition.
            </p>
            <button className="btn btn-on-dark" style={{ marginTop: 24 }} onClick={() => go("program")}>See the development path <Icon name="arrow" size={16} /></button>
          </div>
        </div>
      </section>

      <CTABand onRequest={onRequest}
        title="A conversation about what comes next." 
        lead="We'd value a focused discussion with investors, partners, and scientific collaborators." />
    </div>
  );
}

/* ============================ RESOURCES ============================ */
function ResourcesPage({ onRequest }) {
  const ref = useReveal();
  const pillars = ["All", ...Array.from(new Set(window.RESOURCES.map((r) => r.pillar)))];
  const [filter, setFilter] = React.useState("All");
  const list = filter === "All" ? window.RESOURCES : window.RESOURCES.filter((r) => r.pillar === filter);
  return (
    <div ref={ref}>
      <section className="sec-dark field page-hero">
        <div className="wrap">
          <div className="crumbs">RESOURCES · NEWS · SCIENCE</div>
          <div style={{ maxWidth: 800 }}>
            <Eyebrow tone="">Resources</Eyebrow>
            <h1 className="page-h" style={{ marginTop: 22 }}>A teachable point of view.</h1>
            <p className="lead-lg" style={{ marginTop: 22 }}>
              Precise, educational answers to the questions serious investors, partners, and scientific evaluators already ask — organized by the belief sequence.
            </p>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 32 }}>
            <SectionHead label="Library" title="Explain the category." maxw="24ch" />
            <div className="tabs" style={{ marginBottom: 4 }}>
              {pillars.map((p) => (
                <button key={p} className={"tab" + (p === filter ? " active" : "")} onClick={() => setFilter(p)} style={{ fontSize: 13.5, padding: "8px 14px" }}>{p}</button>
              ))}
            </div>
          </div>
          <div className="res-grid">
            {list.map((r, i) => (
              <div className="res-card" key={i} onClick={() => go("article", "1")}>
                <div className="res-top" />
                <div className="res-body">
                  <div className="res-pillar">{r.pillar}</div>
                  <h4>{r.title}</h4>
                  <p>{r.excerpt}</p>
                  <div className="res-meta">{r.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* news / updates */}
      <section className="sec sec-bone">
        <div className="wrap">
          <SectionHead label="News & updates" title="Milestone updates, in sequence." maxw="26ch" />
          <div style={{ marginTop: 36 }}>
            {[
              ["2026 · Q1", "Cellares partnership for manufacturing & IND support", "ProTGen and Cellares apply automated manufacturing, QC, and regulatory support toward IND submission."],
              ["Placeholder", "Platform milestone update", "Reserved for the next validated proof point — to be confirmed by ProTGen."],
              ["Placeholder", "Conference / presentation", "Reserved for upcoming scientific presentations and materials."],
            ].map(([date, h, p], i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "150px 1fr", gap: 28, padding: "26px 0", borderTop: "1px solid var(--bone-200)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: ".05em", color: "var(--teal)", paddingTop: 3 }}>{date}</div>
                <div>
                  <h3 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 6px", letterSpacing: "-.01em" }}>{h}</h3>
                  <p style={{ fontSize: 15.5, color: "var(--fg-2)", margin: 0, lineHeight: 1.55, maxWidth: "70ch" }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap-narrow center">
          <Eyebrow center>Stay close to the work</Eyebrow>
          <h2 className="sec-h" style={{ margin: "22px auto" }}>Follow ProTGen's milestones.</h2>
          <div className="flex-row" style={{ justifyContent: "center" }}>
            <button className="btn btn-primary btn-lg" onClick={onRequest}>Subscribe to updates <Icon name="arrow" /></button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("platform")}>Explore the platform</button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================ ARTICLE TEMPLATE ============================ */
function ArticlePage({ onRequest }) {
  const ref = useReveal();
  return (
    <div ref={ref}>
      <section className="sec-dark field page-hero" style={{ paddingBottom: 64 }}>
        <div className="wrap-narrow">
          <div className="crumbs" style={{ cursor: "pointer" }} onClick={() => go("resources")}>← RESOURCES · IMMUNE COMPETENCE</div>
          <h1 className="page-h" style={{ marginTop: 18, fontSize: 50, maxWidth: "20ch" }}>What does it mean to restore immune competence?</h1>
          <div className="flex-row" style={{ marginTop: 24, gap: 18 }}>
            <span className="chip chip-dim">Explainer</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-on-dark-3)" }}>6 min read · belief 02</span>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="article">
          <p>Modern medicine has become increasingly good at attacking disease. It has become far less capable of rebuilding the immune systems that disease, treatment, and age leave behind. That gap is where the idea of <b>immune competence</b> lives.</p>
          <p className="kicker" style={{ marginBottom: 30 }}>Placeholder article — copy to be validated by ProTGen before publication.</p>
          <p className="pull">Immune competence is not a single cell type. It is a diverse, functional repertoire able to recognize and respond.</p>
          <h2>Why disease control is not immune recovery</h2>
          <p>Patients with compromised immune systems need more than disease control. They need durable immune recovery — a diverse, functional adaptive repertoire restored after it has been depleted. Restoring that capacity is a different therapeutic job than attacking disease, and it defines a distinct frontier.</p>
          <h2>A new therapeutic category</h2>
          <p>Restoring immune competence is not a minor variation on immune modulation. It is a distinct category: rebuild the system that must protect the patient afterward. Targeted Notch activation is the enabling biology, and ProT‑096 is the first focused proof point.</p>
          <h2>Where this goes next</h2>
          <p>The category is large; the first wedge is focused. That discipline — one large category, one clear first wedge, one sequence of proof — is what makes the opportunity both ambitious and investable.</p>
          <div className="card" style={{ marginTop: 40, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
            <div>
              <div className="lbl">Next step</div>
              <h3 style={{ margin: 0 }}>Request the briefing deck</h3>
            </div>
            <button className="btn btn-primary" onClick={onRequest}>Request a briefing <Icon name="arrow" size={16} /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================ CONTACT ============================ */
function ContactPage() {
  const ref = useReveal();
  const [sent, setSent] = React.useState(false);
  return (
    <div ref={ref}>
      <section className="sec-dark field page-hero">
        <div className="wrap">
          <div className="crumbs">CONTACT</div>
          <div style={{ maxWidth: 760 }}>
            <Eyebrow tone="">Contact</Eyebrow>
            <h1 className="page-h" style={{ marginTop: 22 }}>Start the right conversation.</h1>
            <p className="lead-lg" style={{ marginTop: 22 }}>
              Tell us your circumstance and we'll route you to the right next step — briefing, diligence, partnering, or scientific exchange.
            </p>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap split-aside">
          <div>
            <div className="card" style={{ padding: "36px 40px" }}>
              {sent ? (
                <div>
                  <Eyebrow>Request received</Eyebrow>
                  <h3 className="sub-h" style={{ marginTop: 18 }}>Thank you.</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.62, color: "var(--fg-2)" }}>
                    The ProTGen team will follow up based on your interest and circumstance. <span className="kicker">(Demo form — no data is sent.)</span>
                  </p>
                  <button className="btn btn-ghost" style={{ marginTop: 22 }} onClick={() => setSent(false)}>Submit another</button>
                </div>
              ) : (
                <>
                  <div className="lbl">Request a briefing</div>
                  <div className="form-grid" style={{ marginTop: 8 }}>
                    <div className="field"><label>Name</label><input placeholder="Full name" /></div>
                    <div className="field"><label>Organization</label><input placeholder="Firm or company" /></div>
                    <div className="field"><label>Role</label><input placeholder="Your role" /></div>
                    <div className="field"><label>Work email</label><input placeholder="name@firm.com" /></div>
                    <div className="field">
                      <label>Interest type</label>
                      <select><option>Investor</option><option>Strategic partner</option><option>Scientific collaborator</option><option>Media</option><option>Careers</option><option>Other</option></select>
                    </div>
                    <div className="field">
                      <label>Area of interest</label>
                      <select><option>Platform</option><option>ProT‑096</option><option>Partnering</option><option>Manufacturing</option><option>General</option></select>
                    </div>
                    <div className="field full"><label>Message (optional)</label><textarea placeholder="Anything that helps us route you well."></textarea></div>
                  </div>
                  <button className="btn btn-primary" style={{ marginTop: 22, width: "100%", justifyContent: "center" }} onClick={() => setSent(true)}>Send request <Icon name="arrow" size={16} /></button>
                </>
              )}
            </div>
          </div>
          <div>
            <div className="lbl">Direct routes</div>
            <div className="stack" style={{ marginTop: 14 }}>
              {[
                ["mail", "Investors & partners", "investors@protgen.bio"],
                ["branch", "Business development", "partnering@protgen.bio"],
                ["flask", "Scientific collaboration", "science@protgen.bio"],
                ["mail", "General & media", "hello@protgen.bio"],
              ].map(([ic, h, e]) => (
                <div key={h} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--teal)", display: "flex", marginTop: 2 }}><Icon name={ic} size={20} /></span>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 600 }}>{h}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13.5, color: "var(--teal)" }}>{e}</div>
                  </div>
                </div>
              ))}
            </div>
            <p className="kicker" style={{ marginTop: 28 }}>Contact addresses are placeholders pending ProTGen confirmation.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, ResourcesPage, ArticlePage, ContactPage });