/* ProTGen site — Investors & Partners page */

const SEGMENT_DETAIL = {
  Champion: {
    word: "Portable", h: "Make the story travel.",
    intro: "You need to carry ProTGen into a committee or BD meeting and make it legible in under two minutes — without the founder in the room.",
    must: ["A portable, one‑sentence company explanation", "A downloadable one‑pager", "A proof stack and objection‑handling language", "The belief sequence in order"],
    cta: "Get the one‑pager", reframe: "If they cannot retell it, they will not sell it.",
  },
  Clinical: {
    word: "Executable", h: "An executable path, not just a platform.",
    intro: "The question is not whether the biology is exciting. It is whether ProTGen has made it testable — manufacturable, regulatable, dosable, and measurable.",
    must: ["ProT‑096 development path", "CMC / manufacturing credibility", "IND path and risk sequence", "Value‑inflection milestones"],
    cta: "Request diligence briefing", reframe: "No repeatability, no investability.",
  },
  Category: {
    word: "Competence", h: "A new investable category.",
    intro: "Decide whether ProTGen can define a category — restoring immune competence — rather than improve a single modality.",
    must: ["The category reframe and white space", "Platform potential and discipline", "Why now", "Expansion horizons as option value"],
    cta: "Request investor briefing", reframe: "First restore, then explore.",
  },
  Partner: {
    word: "Option", h: "Option value across your portfolio.",
    intro: "Decide where ProTGen fits in a future portfolio — and whether to preserve access before the category becomes obvious.",
    must: ["Platform adjacency map", "Portfolio‑fit logic", "Collaboration and option paths", "ProT‑096 as proof point"],
    cta: "Contact partnering", reframe: "Wait for proof, pay for proof.",
  },
};

function InvestorsPage({ onRequest, onDoorway }) {
  const ref = useReveal();
  const keys = Object.keys(SEGMENT_DETAIL);
  const [seg, setSeg] = React.useState("Clinical");
  const S = SEGMENT_DETAIL[seg];
  return (
    <div ref={ref}>
      <section className="sec-dark field page-hero">
        <div className="wrap">
          <div className="crumbs">FOR INVESTORS & PARTNERS</div>
          <div style={{ maxWidth: 760 }}>
            <Eyebrow tone="">Investors & partners</Eyebrow>
            <h1 className="page-h" style={{ marginTop: 22 }}>One story. Four doors in.</h1>
            <p className="lead-lg" style={{ marginTop: 22 }}>
              The ProTGen story cannot become four different stories — but it does need four different ways in. Choose the one that fits your circumstance.
            </p>
          </div>
        </div>
      </section>

      {/* thesis */}
      <section className="sec">
        <div className="wrap-narrow center">
          <Eyebrow center>The thesis</Eyebrow>
          <p className="serif-idea" style={{ marginTop: 26 }}>
            ProTGen is building a new category in immune reconstitution: targeted Notch activators that restore immune competence. ProT‑096 provides the first focused clinical wedge — a way to evaluate the platform through a concrete development path rather than a broad scientific promise.
          </p>
        </div>
      </section>

      {/* audience switcher */}
      <section className="sec sec-bone">
        <div className="wrap">
          <SectionHead label="Choose your circumstance" title="What you need to see depends on why you're here." maxw="34ch" />
          <div className="tabs" style={{ marginTop: 32 }}>
            {keys.map((k) => (
              <button key={k} className={"tab" + (k === seg ? " active" : "")} onClick={() => setSeg(k)}>
                {k === "Champion" ? "Internal champion" : k === "Clinical" ? "Clinical‑transition" : k === "Category" ? "Category‑creation" : "Strategic BD"}
              </button>
            ))}
          </div>
          <div className="card" style={{ marginTop: 26, padding: 0, overflow: "hidden" }}>
            <div className="split" style={{ gap: 0 }}>
              <div style={{ padding: "42px 46px" }}>
                <div className="lbl">One word · {S.word}</div>
                <h3 className="sub-h" style={{ fontSize: 30 }}>{S.h}</h3>
                <p style={{ fontSize: 17, lineHeight: 1.62, color: "var(--fg-2)", margin: "0 0 24px" }}>{S.intro}</p>
                <button className="btn btn-primary" onClick={() => onDoorway(seg)}>{S.cta} <Icon name="arrow" size={16} /></button>
              </div>
              <div style={{ padding: "42px 46px", background: "var(--ink)", color: "var(--bone)" }}>
                <div className="lbl cyan">What this audience must see</div>
                <div className="stack-sm" style={{ marginTop: 8 }}>
                  {S.must.map((m, i) => (
                    <div className="flex-row" key={i} style={{ gap: 11, alignItems: "flex-start" }}>
                      <span style={{ color: "var(--cyan)", display: "flex", marginTop: 2 }}><Icon name="check" size={17} /></span>
                      <span style={{ fontSize: 15.5, color: "var(--bone)" }}>{m}</span>
                    </div>
                  ))}
                </div>
                <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, color: "var(--cyan)", marginTop: 26, lineHeight: 1.4 }}>“{S.reframe}”</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* milestone path */}
      <section className="sec">
        <div className="wrap">
          <SectionHead label="Milestone path" title="What is de‑risked, what is in progress, what comes next." maxw="34ch" />
          <div style={{ marginTop: 36 }}><MilestoneTimeline /></div>
        </div>
      </section>

      {/* one-pager module */}
      <section className="sec sec-navy">
        <div className="wrap split-aside">
          <div>
            <Eyebrow tone="">Take it with you</Eyebrow>
            <h2 className="sec-h" style={{ marginTop: 22 }}>The portable case for ProTGen.</h2>
            <p className="lead">
              A one‑page brief that makes the story travel: what problem ProTGen solves, why the mechanism matters, why the first program is credible, and what milestones come next.
            </p>
          </div>
          <div>
            <div className="card card-dark" style={{ padding: "32px 34px" }}>
              <div style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
                <div style={{ width: 52, height: 66, borderRadius: 6, background: "var(--grad-restoration)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}><Icon name="file" size={22} /></div>
                <div>
                  <h3 style={{ margin: "0 0 6px", color: "var(--bone)" }}>Investor one‑pager</h3>
                  <p style={{ margin: 0, color: "var(--fg-on-dark-2)", fontSize: 14.5 }}>PDF · confidential · forwardable</p>
                </div>
              </div>
              <button className="btn btn-primary" style={{ marginTop: 24, width: "100%", justifyContent: "center" }} onClick={onRequest}>
                <Icon name="download" size={16} /> Download the one‑pager
              </button>
              <p className="kicker" style={{ marginTop: 14, color: "var(--fg-on-dark-3)" }}>Placeholder — gated download to be wired to the live asset.</p>
            </div>
          </div>
        </div>
      </section>

      {/* objection handling */}
      <section className="sec sec-bone">
        <div className="wrap-narrow">
          <SectionHead label="Questions we keep hearing" title="Objection handling, in the open." center maxw="30ch" />
          <div style={{ marginTop: 40 }}><FaqList /></div>
        </div>
      </section>

      <CTABand onRequest={onRequest}
        title="Engage early enough to shape the question."
        lead="Whether the right next step is a briefing, diligence, or a partnering conversation — start it here." />
    </div>
  );
}

Object.assign(window, { InvestorsPage });