/* ProTGen site · Pre-BIO (working reference page; sibling of Proposal, understated).
   A thinking tool for Carter and Amritha in the run-up to and during BIO San Diego.

   Two views climb the experience ladder toward "meaningful":
   - "doc"  : the full working document (the plane read), with a sticky on-this-page
              rail + scroll-spy so any section is reachable in one click mid-conference.
   - "card" : a condensed, print-ready field card (the between-meetings reference).
              Nothing in the card is new; it re-presents the document at a glance.

   The load-bearing element is the side-by-side comparison (Notch frame vs. Longevity
   frame); see <Cmp />. */

/* Side-by-side comparison frame.
   left/right  = column header labels (also used as per-cell labels when stacked on mobile)
   rows        = [{ l: <JSX>, r: <JSX> }, ...] one entry per parallel pair */
function Cmp({ left, right, rows }) {
  return (
    <div className="cmp">
      <div className="cmp-head">
        <div className="cmp-col-h">{left}</div>
        <div className="cmp-col-h">{right}</div>
      </div>
      {rows.map((row, i) => (
        <div className="cmp-row" key={i}>
          <div className="cmp-cell"><span className="cmp-frame">{left}</span>{row.l}</div>
          <div className="cmp-cell"><span className="cmp-frame">{right}</span>{row.r}</div>
        </div>
      ))}
    </div>
  );
}

/* Branded inline audio player for the "Hear each door" strip.
   Custom transport over a hidden <audio> so the chrome stays in-system (teal accent,
   mono labels). The mp3 is referenced by path and base-64 inlined at bundle time, so
   it plays in-page and offline. */
function HearPlayer({ frame, caption, audioKey, fallback }) {
  const ref = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [cur, setCur] = React.useState(0);
  const [dur, setDur] = React.useState(0);
  const src = (typeof window !== "undefined" && window.PREBIO_AUDIO && window.PREBIO_AUDIO[audioKey]) || fallback;

  const fmt = (t) => {
    if (!isFinite(t) || t < 0) t = 0;
    const m = Math.floor(t / 60), s = Math.floor(t % 60);
    return m + ":" + String(s).padStart(2, "0");
  };

  const toggle = () => {
    const a = ref.current;
    if (!a) return;
    if (a.paused) { a.play(); } else { a.pause(); }
  };

  const seek = (e) => {
    const a = ref.current;
    if (!a || !isFinite(a.duration)) return;
    const r = e.currentTarget.getBoundingClientRect();
    a.currentTime = ((e.clientX - r.left) / r.width) * a.duration;
  };

  const pct = dur ? (cur / dur) * 100 : 0;

  return (
    <div className={"hear-cell" + (playing ? " playing" : "")}>
      <audio
        ref={ref}
        src={src}
        preload="metadata"
        onPlay={() => setPlaying(true)}
        onPause={() => setPlaying(false)}
        onEnded={() => setPlaying(false)}
        onTimeUpdate={(e) => setCur(e.target.currentTime)}
        onLoadedMetadata={(e) => setDur(e.target.duration)}
      ></audio>
      <button className="hear-play" onClick={toggle} aria-label={(playing ? "Pause " : "Play ") + frame + " pitch"}>
        {playing ? (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="5" width="4" height="14"></rect><rect x="14" y="5" width="4" height="14"></rect></svg>
        ) : (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
        )}
      </button>
      <div className="hear-txt">
        <div className="hear-top">
          <span className="hear-frame">{frame}</span>
          <span className="hear-time">{fmt(cur)} / {fmt(dur)}</span>
        </div>
        <span className="hear-cap">{caption}</span>
        <div className="hear-track" onClick={seek}>
          <div className="hear-fill" style={{ width: pct + "%" }}></div>
        </div>
      </div>
    </div>
  );
}

const PREBIO_SECTIONS = [
  ["what-this-is", "What this is"],
  ["two-frames", "The two frames"],
  ["six-pitches", "The six modern pitches"],
  ["insight", "Which door funds the round"],
  ["ask-first", "What each door asks first"],
  ["three-word", "Three-word test"],
  ["at-bio", "What to do at BIO"],
  ["whats-next", "What comes next"],
];

/* Sticky wayfinding rail (mirrors the Proposal page) + a quiet switch to the field card. */
function PreBioTOC({ active, onJump, onCard }) {
  return (
    <aside className="proposal-toc prebio-toc">
      <div className="toc-h">On this page</div>
      <nav>
        {PREBIO_SECTIONS.map(([id, label]) => (
          <a key={id} className={active === id ? "active" : ""} onClick={() => onJump(id)}>{label}</a>
        ))}
      </nav>
      <div className="prebio-switch">
        <div className="prebio-switch-h">Between meetings?</div>
        <button className="prebio-switch-btn" onClick={onCard}>Open the field card →</button>
      </div>
    </aside>
  );
}

/* Condensed, print-ready reference. Everything here is drawn from the document above. */
function FieldCard() {
  return (
    <div className="field-card">
      <div className="fc-head">
        <div className="fc-kicker">BIO field card</div>
        <h2 className="fc-title">Read the room, then pick the door.</h2>
        <p className="fc-note">Condensed from the working document, for a glance between meetings. Nothing here is new; it is the document at a glance. Decide per room, not in advance.</p>
      </div>

      <div className="fc-sec">
        <div className="fc-sec-h">1 · Open the room</div>
        <div className="fc-grid">
          <div className="fc-col">
            <div className="fc-frame">Notch frame</div>
            <p className="fc-line"><span className="fc-lbl">Open</span>"ProT-096: first targeted Notch activator entering IND for refractory hematologic malignancies."</p>
            <p className="fc-line"><span className="fc-lbl">Close</span>"Reconstitute." · "If the thymus stays still, the immune system can't heal."</p>
          </div>
          <div className="fc-col">
            <div className="fc-frame">Longevity frame</div>
            <p className="fc-line"><span className="fc-lbl">Open</span>"The organ that ages first, and what it would mean to restart it."</p>
            <p className="fc-line"><span className="fc-lbl">Close</span>"Reverse." · "A thymus that wakes is a body that takes."</p>
          </div>
        </div>
      </div>

      <div className="fc-sec">
        <div className="fc-sec-h">2 · What each door asks first</div>
        <div className="fc-grid">
          <div className="fc-col">
            <div className="fc-frame">Notch-frame audience</div>
            <ul className="fc-list">
              <li>What's the IND timeline for ProT-096?</li>
              <li>How does manufacturing scale in personalized cell therapy?</li>
              <li>Competitive landscape vs. ex vivo T-cell engineering?</li>
              <li>What's the partnership structure with Cellares?</li>
              <li>Where does the platform go after ProT-096?</li>
            </ul>
          </div>
          <div className="fc-col">
            <div className="fc-frame">Longevity-frame audience</div>
            <ul className="fc-list">
              <li>Cleanest preclinical signal that Notch activation restores thymic function, not just T-cell output?</li>
              <li>Dose-response? Off-target risk across Notch-dependent tissues?</li>
              <li>Second indication: aging biology or still oncology?</li>
              <li>SAB credibility in aging biology, not just hematology?</li>
              <li>Smallest human data to raise a longevity-themed round at a longevity multiple?</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="fc-sec">
        <div className="fc-sec-h">3 · The memory hook (done well)</div>
        <div className="fc-grid">
          <div className="fc-col"><div className="fc-frame">Notch frame</div><p className="fc-hook">"Targeted, clinical, credible."</p></div>
          <div className="fc-col"><div className="fc-frame">Longevity frame</div><p className="fc-hook">"Upstream, specific, proven-in-extremis."</p></div>
        </div>
      </div>

      <div className="fc-sec">
        <div className="fc-sec-h">4 · Find who carries your story</div>
        <p className="fc-q">"Who in your shop is most curious about thymic-targeted approaches, and would it be useful for them to have a version of this written for them?"</p>
        <p className="fc-sub">Notice who asks about thymic biology unprompted. That person is almost always the one driving aging-related diligence inside their firm, and is worth a follow-up after BIO.</p>
      </div>
    </div>
  );
}

function PreBioWorkingDoc() {
  const [view, setView] = React.useState("doc");
  const [active, setActive] = React.useState(PREBIO_SECTIONS[0][0]);

  React.useEffect(() => {
    if (view !== "doc") return;
    const ids = PREBIO_SECTIONS.map((s) => s[0]);
    let ticking = false;
    const compute = () => {
      ticking = false;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 130) current = id;
      }
      setActive(current);
    };
    const onScroll = () => { if (!ticking) { ticking = true; window.requestAnimationFrame(compute); } };
    window.addEventListener("scroll", onScroll, { passive: true });
    compute();
    return () => window.removeEventListener("scroll", onScroll);
  }, [view]);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 92;
    window.scrollTo({ top: y, behavior: "smooth" });
  };

  return (
    <div className="prebio-page">
      <section className="sec">
        {view === "doc" ? (
          <div className="proposal-layout prebio-layout">
            <PreBioTOC active={active} onJump={jump} onCard={() => { setView("card"); window.scrollTo(0, 0); }} />

            <div className="prebio-body article">

              <div className="crumbs" style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 18 }}><a href="#/pre-bio" style={{ color: "var(--fg-2)", textDecoration: "none" }}>Pre-BIO</a> <span style={{ color: "var(--bone-300)", margin: "0 4px" }}>/</span> June 5 working document</div>
              <h1 className="page-h" style={{ fontSize: 46, lineHeight: 1.08, maxWidth: "21ch" }}>Two doors into BIO: ProTGen as a Notch company or a longevity company</h1>

              <p className="proposal-updated">Updated June 5, 2026 · 10 min read</p>

              <div className="prebio-byline-top">
                <div>A pre-BIO working document for Carter and Amritha</div>
                <div>From Daniel, Eric, and Dave at Dark Horse Works</div>
                <div>Friday, June 5, 2026</div>
              </div>

              <div className="prebio-brief">
                <div className="pb-kicker">The quick version</div>
                <p><b>The big picture.</b> ProTGen is one molecule with two legitimate categories. This document puts both side by side so you can choose your door per room at BIO, with the language ready either way.</p>
                <p><b>Why it matters.</b> Same science, but a different audience, capital pool, and proof bar behind each door. The sentence the room repeats about you when you leave is the one that sets the valuation conversation.</p>
                <p><b>Door one: Notch frame.</b> Targeted Notch activators for refractory hematologic malignancies. The current public positioning; credible, but a crowded room.</p>
                <p><b>Door two: Longevity frame.</b> Thymic reactivation as an aging-biology platform, with ProT-096 as the worst-case proof. Less crowded, better capitalized in 2026.</p>
                <div className="pb-jump">
                  <button onClick={() => jump("six-pitches")}>See the six side-by-side pitches <span aria-hidden="true">↓</span></button>
                </div>
              </div>

              <div className="hear">
                <div className="hear-kicker">Hear each door</div>
                <div className="hear-grid">
                  <HearPlayer frame="Notch frame" caption="The challenger pitch, delivered" audioKey="notch" fallback="assets/audio/notch-pitch.mp3" />
                  <HearPlayer frame="Longevity frame" caption="The challenger pitch, delivered" audioKey="longevity" fallback="assets/audio/longevity-pitch.mp3" />
                </div>
              </div>

              <hr className="rule" />

              {/* ===================== What this is ===================== */}
              <h2 id="what-this-is">What this is</h2>
              <p>You have one molecule and two legitimate categories. Most of the BIO conversation will assume the category is settled: that ProTGen is a cell therapy / hematology / Notch-mechanism platform with a refractory-leukemia beachhead. That is one true sentence about the company. There is at least one other true sentence: ProTGen is a thymic-reactivation longevity company whose first clinical proof point happens to live in oncology because that is where the regulatory path is shortest and the patient need is most legible.</p>
              <p>Same science. Different door. Different audience. Different capital pool. Different bar for proof. Different objections.</p>
              <p>This document does not argue for one. It puts both through the same set of pitches, side by side, so the choice becomes visible, and so whichever door you walk through at BIO, the language is ready.</p>
              <p>We built it because Amritha asked for "a story that gets Carter in the room," and the door you choose changes which room you're walking into.</p>

              <hr className="rule" />

              {/* ===================== The two frames ===================== */}
              <h2 id="two-frames">The two frames, in one paragraph each</h2>
              <p><b>Notch frame (current public positioning).</b> ProTGen develops targeted Notch activators to restore immune competence. ProT-096 is a personalized progenitor T cell therapy for patients with refractory hematologic malignancies, partnered with Cellares for automated manufacturing toward IND. The platform extends across cell-fate programming for broader immune reconstitution. This is the sentence the website tells today.</p>
              <p><b>Longevity frame (alternative).</b> ProTGen reverses immune aging by targeting the thymus, the organ whose decline drives most age-related immune failure, from infection susceptibility to vaccine non-response to cancer surveillance loss. ProT-096 is the worst-case validation: if targeted thymic reactivation works in patients whose immune systems have been destroyed by chemotherapy, the case for restoring immune competence in older adults, immunocompromised populations, and post-acute illness becomes credible. Same Notch biology. Different organizing question.</p>
              <p>Both are true. Neither is hype. The audience for each is different.</p>

              <hr className="rule" />

              {/* ===================== Side-by-side: the six modern pitches ===================== */}
              <h2 id="six-pitches">Side-by-side: the six modern pitches</h2>

              <h3>1. One-word pitch</h3>
              <Cmp left="Notch frame" right="Longevity frame" rows={[
                {
                  l: <><p className="cmp-lead"><b>Reconstitute.</b></p><p className="cmp-sub">The story is about restoring something biology already knows how to build, adaptive immunity, to patients whose systems have failed.</p></>,
                  r: <><p className="cmp-lead"><b>Reverse.</b></p><p className="cmp-sub">The story is about turning back a process previously treated as fixed: the thymic involution that begins in childhood and compounds across a lifetime.</p></>,
                },
              ]} />

              <h3>2. Question pitch</h3>
              <Cmp left="Notch frame" right="Longevity frame" rows={[
                {
                  l: <p className="cmp-lead">"What if T-cell immunity could be rebuilt on demand, in patients whose own systems can no longer do it?"</p>,
                  r: <p className="cmp-lead">"What if the organ that builds your immune system could be restarted at any age?"</p>,
                },
                {
                  l: <p className="cmp-sub">Strong with hematology and cell therapy investors who already believe immune reconstitution is undersolved. Weak with anyone who's been burned by thymic-rejuvenation claims that didn't translate.</p>,
                  r: <p className="cmp-sub">Strong with longevity capital and aging-biology investors trained to look for upstream interventions on declining organ systems. Weak with traditional biotech investors who flinch at "longevity" as a category.</p>,
                },
              ]} />

              <h3>3. Rhyming pitch</h3>
              <Cmp left="Notch frame" right="Longevity frame" rows={[
                {
                  l: <><p className="cmp-lead"><b>If the thymus stays still, the immune system can't heal.</b></p><p className="cmp-sub">Pure mechanism-to-outcome. Useful as a closing line in a BD meeting.</p></>,
                  r: <><p className="cmp-lead"><b>A thymus that wakes is a body that takes</b>: fewer infections, sharper response, more years of competent defense.</p><p className="cmp-sub">Outcome-forward. Useful as a closing line in a longevity-capital meeting. The second clause carries the burden of proof; without it, it sounds promotional.</p></>,
                },
              ]} />

              <h3>4. Subject-line pitch</h3>
              <Cmp left="Notch frame" right="Longevity frame" rows={[
                {
                  l: <p className="cmp-sub"><b>Utility:</b> "ProT-096: first targeted Notch activator entering IND for refractory hematologic malignancies"</p>,
                  r: <p className="cmp-sub"><b>Utility:</b> "Targeted thymic reactivation: an aging-biology platform with a clinical proof point in oncology"</p>,
                },
                {
                  l: <p className="cmp-sub"><b>Curiosity:</b> "What if T-cell reconstitution didn't require a transplant?"</p>,
                  r: <p className="cmp-sub"><b>Curiosity:</b> "The organ that ages first, and what it would mean to restart it"</p>,
                },
              ]} />
              <p>For BIO partnering meetings booked through the standard biotech channel, the utility line for the Notch frame is the safer open. For cold outreach to longevity capital between BIO sessions, the longevity curiosity line opens a different inbox.</p>

              <h3>5. Twitter pitch (≤120 chars)</h3>
              <Cmp left="Notch frame" right="Longevity frame" rows={[
                {
                  l: <p className="cmp-lead">Targeted Notch activation to rebuild T-cell immunity. ProT-096 → IND. Platform across hematology + immune disorders. <span className="cmp-count">(119)</span></p>,
                  r: <p className="cmp-lead">The thymus ages first. We turn it back on. ProT-096 proves it where the immune system has already collapsed. <span className="cmp-count">(110)</span></p>,
                },
              ]} />

              <h3>6. Pixar pitch (six-sentence story arc)</h3>
              <Cmp left="Notch frame" right="Longevity frame" rows={[
                {
                  l: <ol className="cmp-steps"><li><span className="cs-n">1</span>Once upon a time, patients survived their cancer but lost their immune system to the treatment that saved them.</li><li><span className="cs-n">2</span>Every day, they faced infections, relapse, and a years-long climb back to a functional adaptive immune system.</li><li><span className="cs-n">3</span>One day, we learned that targeted Notch activation could direct progenitor cells down the T-cell lineage on demand.</li><li><span className="cs-n">4</span>Because of that, we built ProT-096, a personalized progenitor T cell therapy for patients with refractory hematologic malignancies.</li><li><span className="cs-n">5</span>Because of that, we secured automated manufacturing with Cellares and a regulatory path toward IND.</li><li><span className="cs-n">6</span>Until finally, immune reconstitution stops being something that happens slowly, if at all, and becomes something we can engineer.</li></ol>,
                  r: <ol className="cmp-steps"><li><span className="cs-n">1</span>Once upon a time, the thymus, the organ that teaches your body to fight new threats, started shrinking the day you hit puberty, and kept shrinking for the rest of your life.</li><li><span className="cs-n">2</span>Every day, the immune system you walked into old age with was a paler copy of the one you had at twenty.</li><li><span className="cs-n">3</span>One day, we discovered that targeted Notch activation could reactivate thymic progenitor pathways with precision the field had never had.</li><li><span className="cs-n">4</span>Because of that, we are testing the hardest possible case first: patients whose immune systems have been emptied by chemotherapy, in a refractory leukemia setting where the alternative is death.</li><li><span className="cs-n">5</span>Because of that, the same biology that rescues immune function in extremis becomes the foundation for restoring immune competence wherever it has been lost: to age, to stress, to chronic disease.</li><li><span className="cs-n">6</span>Until finally, the immune decline most people accept as the price of getting older stops being inevitable.</li></ol>,
                },
              ]} />

              <hr className="rule" />

              {/* ===================== The insight ===================== */}
              <h2 id="insight">Which door funds the next eighteen months</h2>
              <p>The most powerful conversations at BIO won't start with "here's what we do." They start with a reframe that changes how the other side sees their own situation, fit to that firm's economics, with the choice made concrete enough to act on.</p>
              <p>For ProTGen at BIO, the insight is not about Notch or about longevity. It is about which audience door funds the next eighteen months on the best terms.</p>
              <p><b>The reframe to bring into the room:</b></p>
              <p>Most of the partners you'll meet at BIO have been trained to ask, "what's the mechanism, what's the first indication, what's the IP?", in that order. They are pattern-matching to a cell therapy or hematology template. Inside that pattern, ProTGen is a credible but crowded entrant: another novel-mechanism platform with one program in development.</p>
              <p>There is a second pattern, less crowded and substantially better capitalized in 2026, that asks, "what is the upstream driver of the decline you're addressing, and is your intervention specific enough to credibly modulate it without breaking adjacent biology?" That is the pattern longevity capital (Hevolution, certain Khosla and NEA partners, the Saudi sovereign aging funds, the Altos-adjacent investor network) has been trained on. Inside that pattern, ProTGen is not "another cell therapy company." It is one of a very small number of programs that has a targeted way to act on thymic involution, with a hard clinical proof point that traditional aging-biology companies cannot produce.</p>
              <p>The move is not to abandon Notch. It is to recognize that the same molecule walks into a different valuation conversation depending on which sentence the room is repeating about you when you leave.</p>
              <p><b>Find who carries your story.</b> Inside both kinds of organization, the person who carries your story to their internal champion is rarely the person you met. Ask, in every BIO meeting: "Who in your shop is most curious about thymic-targeted approaches, and would it be useful for them to have a version of this written for them?" Then send the version of this document that fits.</p>

              {/* ===================== What to expect each door to ask first ===================== */}
              <h2 id="ask-first">What to expect each door to ask first</h2>
              <Cmp left="The Notch-frame audience opens with…" right="The longevity-frame audience opens with…" rows={[
                {
                  l: <p className="cmp-lead">What's the IND timeline for ProT-096?</p>,
                  r: <p className="cmp-lead">What's the cleanest preclinical signal that targeted Notch activation specifically restores thymic function, not just T-cell output?</p>,
                },
                {
                  l: <p className="cmp-lead">How does manufacturing scale in personalized cell therapy?</p>,
                  r: <p className="cmp-lead">What does the dose-response look like? What's the off-target risk profile across other Notch-dependent tissues?</p>,
                },
                {
                  l: <p className="cmp-lead">What's the competitive landscape against ex vivo T-cell engineering?</p>,
                  r: <p className="cmp-lead">What's your second indication, and is it in aging biology or still in oncology?</p>,
                },
                {
                  l: <p className="cmp-lead">What's the partnership structure with Cellares?</p>,
                  r: <p className="cmp-lead">Who in your scientific advisory board has direct credibility in aging biology, not just hematology?</p>,
                },
                {
                  l: <p className="cmp-lead">Where does the platform go after ProT-096?</p>,
                  r: <p className="cmp-lead">What's the smallest piece of human data that would let you raise a longevity-themed round at a longevity multiple?</p>,
                },
              ]} />
              <p>These are not better or worse questions. They are different vocabularies. Walking into the wrong one with the wrong materials costs a meeting. Walking into the right one with the right materials compounds.</p>

              {/* ===================== Three-word test ===================== */}
              <h2 id="three-word">Three-word test (predictions)</h2>
              <p>If we ran the 90-second retell test on each version of the story today, here is what we'd expect three smart listeners to come back with:</p>
              <p><b>Notch frame today:</b> "Notch, T-cells, leukemia." Accurate. Crowded. Hard to differentiate from a half-dozen other entrants in cell therapy.</p>
              <p><b>Notch frame done well:</b> "Targeted, clinical, credible." This is the version where the mechanism story does the differentiation work.</p>
              <p><b>Longevity frame today:</b> "Thymus, aging, ambitious." Memorable but at risk of sounding like a category claim without proof.</p>
              <p><b>Longevity frame done well:</b> "Upstream, specific, proven-in-extremis." The third word is the load-bearing one: without ProT-096 in refractory hematologic malignancies as the hard validation, the longevity story drifts into territory longevity capital has been burned by before.</p>
              <p>The good news: ProT-096 carries the proof burden in both frames. It is the same wedge. The frame only changes the room it's pointed at.</p>

              {/* ===================== What to do with this at BIO ===================== */}
              <h2 id="at-bio">What to do with this at BIO</h2>
              <p>A few suggestions, lightly held:</p>
              <p><b>Read it once on the plane, then put it away.</b> This is a thinking tool, not a script. The point is to know which door you're choosing to walk through in each meeting, not to memorize a new pitch.</p>
              <p><b>Test the cognition cheaply.</b> If you have a partner meeting where the stakes are lower, try the longevity frame in the opening sixty seconds and watch what they ask next. The kind of question that comes back tells you which door their organization is wired for. We've seen this kind of cheap A/B test give a founder more strategic clarity than three weeks of internal strategy work.</p>
              <p><b>Notice who asks about thymic biology unprompted.</b> That person is almost always the one driving aging-related diligence in their organization, whether or not their fund has a formal longevity thesis. They are worth a follow-up after BIO.</p>
              <p><b>Don't try to be both at once.</b> The temptation will be to write a one-pager that "covers both." The result is a one-pager that lands as neither: too speculative for the cell therapy audience, too cautious for the longevity audience. The category hierarchy chooses the room. The room chooses the proof bar.</p>

              <hr className="rule" />

              {/* ===================== A note on what comes next ===================== */}
              <h2 id="whats-next">A note on what comes next</h2>
              <p>This is a working document for your use, not a proposal. You have the engagement letter to review whenever it's the right time; that conversation can wait until after BIO without losing anything. What matters this week is that you walk into your meetings with options you can see, not just options you have.</p>
              <p>If the comparison above is useful, that's the point. If a particular frame is clearly wrong for ProTGen's current moment and we've missed something, tell us: what we built on this side of the table is only as good as the substrate you can see that we can't.</p>
              <p>Travel well.</p>
              <p>Daniel, Eric, and Dave<br />Dark Horse Works</p>

              <hr className="rule" />

              <p className="proposal-byline">
                <span>Dark Horse Works · Daniel Behr, Eric Eskey, David Potter</span>
                <span>protgen.darkhorse.works</span>
              </p>

            </div>
          </div>
        ) : (
          <div className="prebio-card-stage">
            <button className="prebio-back" onClick={() => { setView("doc"); window.scrollTo(0, 0); }}>← Full document</button>
            <FieldCard />
          </div>
        )}
      </section>
    </div>
  );
}

const HUB_SECTIONS = [
  ["update-cards", "This update"],
  ["one-pagers", "The one-pagers"],
  ["story-stimulus", "Story stimulus"],
  ["deep-dives", "Deeper dives"],
];

/* Sticky wayfinding rail for the Thursday-deliverable hub (mirrors the working-doc rail). */
function HubTOC({ active, onJump }) {
  return (
    <aside className="proposal-toc prebio-toc">
      <div className="toc-h">On this page</div>
      <nav>
        {HUB_SECTIONS.map(([id, label]) => (
          <a key={id} className={active === id ? "active" : ""} onClick={() => onJump(id)}>{label}</a>
        ))}
      </nav>
      <div className="prebio-switch">
        <div className="prebio-switch-h">Earlier work</div>
        <a className="prebio-switch-btn" href="#/pre-bio/doors">Open the June 5 document <span aria-hidden="true">&rarr;</span></a>
      </div>
    </aside>
  );
}

/* Pre-BIO hub: a dated index. The June 5 working document lives behind /pre-bio/doors;
   the June 11 update (one-pager PDFs + comparison + deep dives) is the default, shown here. */
function PreBioHub() {
  const [active, setActive] = React.useState(HUB_SECTIONS[0][0]);

  React.useEffect(() => {
    const ids = HUB_SECTIONS.map((s) => s[0]);
    let ticking = false;
    const compute = () => {
      ticking = false;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 130) current = id;
      }
      setActive(current);
    };
    const onScroll = () => { if (!ticking) { ticking = true; window.requestAnimationFrame(compute); } };
    window.addEventListener("scroll", onScroll, { passive: true });
    compute();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 92;
    window.scrollTo({ top: y, behavior: "smooth" });
  };

  return (
    <div className="prebio-page">
      <section className="sec">
        <div className="proposal-layout prebio-layout">
          <HubTOC active={active} onJump={jump} />

          <div className="prebio-body article">
            <div className="crumbs" style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 18 }}>Pre-BIO</div>
            <h1 className="page-h" style={{ fontSize: 46, lineHeight: 1.08, maxWidth: "16ch" }}>ProTGen at BIO San Diego</h1>
            <p className="proposal-updated">A running set of pre-BIO working materials, updated as we go</p>
            <p className="prebio-revnote">Updated Thursday, June 11, 2026. This week we added two one-pagers as downloadable PDFs, plus the comparison memo and two story-stimulus deep dives.</p>

            <div className="prebio-cards" id="update-cards">
              <a className="prebio-card" href="#/pre-bio/doors">
                <div className="pc-top">
                  <span className="pc-date">June 5, 2026</span>
                  <span className="pc-tag">Working document</span>
                </div>
                <h2 className="pc-title">Two doors into BIO</h2>
                <p className="pc-desc">ProTGen as a Notch company or a longevity company: six side-by-side pitches, the challenger insight, and what each door asks first.</p>
                <span className="pc-cta">Open the working document <span aria-hidden="true">&rarr;</span></span>
              </a>
              <div className="prebio-card is-current" aria-current="true">
                <div className="pc-top">
                  <span className="pc-date">June 11, 2026</span>
                  <span className="pc-tag pc-tag-current">Current</span>
                </div>
                <h2 className="pc-title">Thursday deliverable</h2>
                <p className="pc-desc">Two reactive one-pagers as viewable, downloadable PDFs, plus the comparison memo and two story-stimulus deep dives.</p>
                <span className="pc-cta pc-cta-static">Shown below <span aria-hidden="true">&darr;</span></span>
              </div>
            </div>

            <hr className="rule" />

            <div className="prebio-update">
              <OnePagerCards />
              <hr className="rule" />
              <StoryStimulus />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function PreBioPage() {
  const route = useRoute();
  if (route.sub === "doors") return <PreBioWorkingDoc />;
  return <PreBioHub />;
}

Object.assign(window, { PreBioPage });
