/* ProTGen site — Proposal (working reference page; sibling of StoryLab, understated)
   Climbs the experience ladder toward "meaningful": sticky TOC + scroll-spy wayfinding,
   a glanceable key-facts strip, and a living milestone rail for the sprint weeks.
   Week status is data-driven below — flip "future" → "next" → "done" as the sprint
   progresses to keep the page a true shared status surface. */

const PROPOSAL_SECTIONS = [
  ["produces", "What the sprint produces"],
  ["why", "Why we shaped it this way"],
  ["weeks", "Sprint week-by-week"],
  ["engagement", "Engagement & investment"],
  ["after", "After the sprint"],
  ["copilot", "BIO copilot"],
  ["need", "What we need from you"],
  ["yes", "How to say yes"],
];

/* status: "done" | "next" | "future" — update as the sprint progresses */
const PROPOSAL_WEEKS = [
  {
    status: "next", chip: "Next up",
    lead: "Week 1 (Jun 2–6). Entry-point discovery — drafts, tests, audience-routing rule.",
    body: (
      <React.Fragment>
        <p>We draft 3–5 candidate entry-point sentences across the longevity and pharmaceutical-pipeline vectors. We test them via short calls with friends-of-the-firm and DHW network, plus digital-twin proxies for archetypes that aren't conversationally accessible in the window (tech-bro longevity capital, traditional pharma BD). We're listening for whether a sympathetic ear can re-state the sentence to a third party 24 hours later, and which sentence lands for which archetype.</p>
        <p>End-of-week output: 1–2 converged candidate sentences, the test data that earned them, and a draft <em>audience-routing rule</em> — i.e., which sentence Amritha leads with for which archetype at BIO. Lead: Eric.</p>
        <p><em>Mid-sprint checkpoint.</em> We name honestly whether the work is trending. If candidates aren't converging or the transfer tests are flat, we surface it and decide together — continue, narrow further, or stop. No surprises at week 3.</p>
      </React.Fragment>
    ),
  },
  {
    status: "future", chip: "Upcoming",
    lead: "Week 2 (Jun 9–13). Layered surfaces and one-pager(s) — first build, first rehearsal.",
    body: (
      <p>Lock the converged sentence(s). Draft the layered surfaces — 5-second hook, 90-second story, 5-minute conversation — each engineered for its own job, each tested separately against its own success criterion (lean-in, retell, <em>Carter-warranted-follow-up</em>). Draft the one-pager — designed to enable the follow-up, not just the in-room conversation. Where the testing in Week 1 supports it, deliver <em>two one-pager variants</em> (or a front/back A/B) Amritha can choose between based on reading the room. Reshape sections of the existing deck in-stride where they need to inherit from the new category sentence — so the deck doesn't conflict with what Amritha and Carter deliver verbally. Run rehearsal #1 with Amritha on the 90-second story. Leads: Dave and Eric, co-developing with Amritha.</p>
    ),
  },
  {
    status: "future", chip: "Upcoming",
    lead: "Week 3 (Jun 16–18). Final artifacts and post-BIO test designed.",
    body: (
      <p>Final one-pager(s). Amritha rehearsal #2 with timing and pivot drills across the layered surfaces. Post-BIO transfer-test protocol designed — a short list of questions Amritha asks her own contacts 5–7 days after BIO, structured to surface whether the story transferred and whether Carter's deep-dive bookings are the right ones. Leads: Dave and Eric.</p>
    ),
  },
];

function ProposalTOC({ active, onJump }) {
  return (
    <aside className="proposal-toc">
      <div className="toc-h">On this page</div>
      <nav>
        {PROPOSAL_SECTIONS.map(([id, label]) => (
          <a key={id} className={active === id ? "active" : ""} onClick={() => onJump(id)}>{label}</a>
        ))}
      </nav>
    </aside>
  );
}

function ProposalPage() {
  const [active, setActive] = React.useState(PROPOSAL_SECTIONS[0][0]);

  React.useEffect(() => {
    const ids = PROPOSAL_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" });
  };

  const dotClass = (s) => "mdot" + (s === "done" ? " on" : s === "next" ? " next" : "");
  const chipClass = (s) => "chip chip-status " + (s === "done" ? "on" : s === "next" ? "next" : "future");

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

          <div className="proposal-body article">
            <div className="crumbs" style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 18 }}>Proposal</div>
            <h1 className="page-h" style={{ fontSize: 46, lineHeight: 1.08, maxWidth: "18ch" }}>ProTGen — Pre-BIO Sprint and What Comes After</h1>

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

            <div className="proposal-meta">
              <div><b>Prepared by:</b> Dark Horse Works (Daniel Behr · Eric Eskey · David Potter)</div>
              <div><b>For:</b> Carter Cliff, Amritha Jaishankar — ProTGen Bio</div>
              <div><b>Date:</b> June 2026</div>
              <div><b>Sprint window:</b> ~3 weeks, closing before BIO San Diego (June 19–25)</div>
            </div>

            <div className="proposal-facts">
              <div className="fact"><div className="fk">Sprint window</div><p className="fv">~3 weeks · closes before BIO</p></div>
              <div className="fact"><div className="fk">Investment</div><p className="fv">$5,000 / month + $50k outcome bonus</p></div>
              <div className="fact"><div className="fk">Next step</div><p className="fv">Reply to Eric</p></div>
            </div>

            <hr className="rule" />

            <h2 id="produces">What the sprint produces</h2>
            <p className="pull">A defensible category sentence for ProTGen — and the layered conversation surfaces and carrier artifacts that inherit from it (5-second hook → 90-second story → 5-minute conversation, with one-pager and deck-as-needed as the carriers) — designed to let Amritha at BIO qualify the right opportunities and earn Carter the deep dives worth taking.</p>
            <p>Each surface has a different job, a different success criterion, and a different test. The 5-second hook earns the right to deliver the 90 seconds. The 90 seconds earns the right to the 5-minute conversation. The 5-minute conversation earns Carter a 30-minute deep dive with a counterparty whose interest is qualified. Everything in the next 21 days serves that cascade.</p>

            <h2 id="why">Why we shaped it this way</h2>
            <p>The conversation on May 28 surfaced a clear pattern. The deck-doesn't-travel-without-Carter problem is real, but it's the visible surface of a deeper question. Amritha named it cleanly: the one-pager, the deck, and the website are not three problems but one problem wearing three costumes. Until ProTGen has a single defensible sentence naming the near-term-vs-long-term platform and the gap it closes against what pharma is currently buying, polishing any of the three artifacts produces work that looks competent but doesn't earn the follow-up.</p>
            <p>Two related decisions shape the sprint. First, the positioning is <em>both</em> longevity and pharmaceutical-pipeline — not a choice between them. The story is designed so the speaker can emphasize one vector or the other depending on counterparty reaction. Amritha at BIO is also a training ground: she returns from San Diego with a more nuanced sense of which vector to lead with. Second, we don't yet know which entry-point sentence resonates with which audience archetype, and the only honest way to know is to test. Week 1 is structured as a small discovery instrument that produces both the sentence <em>and</em> the data that earned it.</p>

            <h2 id="weeks">Sprint week-by-week</h2>
            <div className="milestones proposal-weeks">
              {PROPOSAL_WEEKS.map((w, i) => (
                <div className="mrow" key={i}>
                  <div className="mphase"><span className={chipClass(w.status)}>{w.chip}</span></div>
                  <div className="mline"><span className={dotClass(w.status)}></span><span className="mbar"></span></div>
                  <div className="mbody">
                    <h4>{w.lead}</h4>
                    {w.body}
                  </div>
                </div>
              ))}
            </div>

            <h2 id="engagement">Engagement structure and investment</h2>
            <p><b>$5,000/month, scope-driven duration.</b> The sprint above is the first month. The engagement continues only as long as there's work worth doing together — your call, end of each month.</p>
            <p>On top of the monthly retainer: a <b>$50,000 outcome bonus</b> payable on a signed term sheet that lands within 12 months of engagement start. Two trigger events qualify — your read of which fits ProTGen's near-term path is the one we structure to:</p>
            <ul>
              <li>A <b>signed pharma partnership term sheet</b> for the Notch platform — written, executed, with material economic terms and counterparty named (license, option, or definitive partnership).</li>
              <li>A <b>signed lead-investor term sheet</b> on a priced round — written, executed, with the lead investor identified.</li>
            </ul>
            <p>The bonus fires once, on whichever trigger lands first. Paid within 30 days of the trigger event — so the bonus is structurally payable from the capital it helped catalyze, not from ProTGen's current cash. No equity, no warrants, no percentage of the deal — clean cash on both layers.</p>
            <p><b>If neither trigger fires within the 12-month window, the $5,000/month is the entirety of what you pay.</b> This is the bargain we're offering: a modest retainer for the labor consumed each month, plus a bonus that fires only when the work has measurably catalyzed a capital event ProTGen can pay it from.</p>
            <p>The proposal lives at <b>protgen.darkhorse.works</b> as a working reference page Carter, Amritha, and the team can come back to throughout the engagement — alongside the other materials we build together.</p>

            <h2 id="after">What we recommend doing after the sprint</h2>
            <p>The 21 days deliberately don't cover four things you raised. Each of them is real work, and each is better done <em>after</em> the sprint earns the right.</p>
            <ul>
              <li><b>HSCT demand-discovery study.</b> Arm's-length interviews with 12–20 HSCT decision-makers — transplanters, payers, hospital administrators, patient advocates — on what they actually value and would pay for (infection-reduction vs. relapse-free survival vs. price tolerance vs. time-to-discharge). Kicked off with the Abby (GametaCell) substrate call you offered to broker. Recommended duration: ~2 months at the same monthly retainer.</li>
              <li><b>Investor deck rebuild.</b> A full structural rebuild — re-architecting the deck around the validated category sentence and audience-routing rule — is recommended after BIO and after the demand-discovery findings are in. Light reshaping in-sprint (sections that need to inherit from the new category sentence so the deck doesn't conflict with what Amritha and Carter deliver verbally) happens in-stride as the work surfaces it, no separate scope or charge.</li>
              <li><b>Carve-out / company-creation modeling.</b> If a longevity-capital syndicate emerges with appetite for an aging-indication-first vehicle, the modeling work is meaningful. Held as optionality, not as a near-term scope.</li>
              <li><b>Internal-stakeholder narrative pack.</b> A one-page version of the platform thesis aligned for existing stakeholders, so the external repositioning at BIO doesn't run ahead of internal alignment. Light-lift, high-leverage; happy to scope inside a continuing month.</li>
            </ul>
            <p>We don't price these now. We name them so the optionality is visible.</p>

            <h2 id="copilot">One idea worth offering — a BIO copilot, on request</h2>
            <p>If it would help, Dave can join Amritha at BIO as a copilot — not to pitch, but to extend her ROI from the conference. The job is to be the second set of ears: catching market signals in real time, tracking which entry-point sentence is landing with which archetype, helping debrief between meetings so the routing rule we built in the sprint actually gets refined in the field rather than only afterward. Dave has done three prior BIOs and reads partnering rooms well.</p>
            <p>No additional fee — this is inside the engagement. We'd ask only that ProTGen cover his travel and conference expenses. Not built into the scope; mention it if you'd like it and we'll plan accordingly.</p>

            <h2 id="need">What we need from you</h2>
            <ul>
              <li>Confirmation the structure works.</li>
              <li>Your read on which milestone trigger fits ProTGen's near-term path (pharma partnership or lead investor), so we structure accordingly.</li>
              <li>A 45-minute kickoff with Amritha early in Week 1.</li>
              <li>A standing 30-minute weekly check-in with Amritha (Carter optional, async substitute when travel makes it harder).</li>
            </ul>

            <h2 id="yes">How to say yes</h2>
            <p>Reply to Eric. A short engagement letter memorializing the structure follows shortly after; Week 1 kicks off on signature.</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>
      </section>
    </div>
  );
}

Object.assign(window, { ProposalPage });
