/* June 11 update, the two one-pagers, presented as viewable + downloadable PDF cards.
   Each card shows a live (scaled) preview of the actual one-pager document. "View full"
   opens the one-pager in an in-app overlay (an iframe, so it stays inside the session and
   needs no new-tab navigation), and "Download PDF" opens that overlay and triggers the
   browser's print-to-PDF on the one-pager. The documents live at onepagers/onepager-*.html. */

function OnePagerModal({ item, onClose }) {
  const frameRef = React.useRef(null);
  const printedRef = React.useRef(false);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  const doPrint = () => {
    try {
      const f = frameRef.current;
      if (f && f.contentWindow) { f.contentWindow.focus(); f.contentWindow.print(); }
    } catch (e) {}
  };
  const onLoad = () => {
    if (item.print && !printedRef.current) { printedRef.current = true; setTimeout(doPrint, 400); }
  };

  return (
    <div className="op-modal-scrim" onClick={onClose}>
      <div className="op-modal" role="dialog" aria-modal="true" aria-label={item.title} onClick={(e) => e.stopPropagation()}>
        <div className="op-modal-bar">
          <div className="op-modal-titles">
            <span className="op-modal-kick">{item.kicker}</span>
            <span className="op-modal-title">{item.title}</span>
          </div>
          <div className="op-modal-actions">
            <button type="button" className="op-btn op-btn-primary" onClick={doPrint}>Download PDF</button>
            <button type="button" className="op-modal-close" aria-label="Close preview" onClick={onClose}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
          </div>
        </div>
        <div className="op-modal-stage">
          <iframe ref={frameRef} className="op-modal-frame" src={"onepagers/" + item.file + ".html?embed=1"} title={item.title} onLoad={onLoad}></iframe>
        </div>
      </div>
    </div>
  );
}

function OnePagerCard({ file, kicker, title, desc, onOpen }) {
  const view = "onepagers/" + file + ".html";
  const open = (print) => onOpen({ file, kicker, title, print });
  return (
    <article className="op-card">
      <div
        className="op-preview"
        role="button"
        tabIndex={0}
        aria-label={"View the " + kicker + " one-pager"}
        onClick={() => open(false)}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(false); } }}
      >
        <div className="op-preview-scale">
          <iframe src={view + "?embed=1"} title={kicker + " one-pager preview"} tabIndex="-1" scrolling="no" loading="lazy"></iframe>
        </div>
        <span className="op-preview-badge">PDF · 1 page</span>
      </div>
      <div className="op-card-body">
        <div className="op-card-kick">{kicker}</div>
        <h3 className="op-card-title">{title}</h3>
        <p className="op-card-desc">{desc}</p>
        <div className="op-card-actions">
          <button type="button" className="op-btn op-btn-primary" onClick={() => open(true)}>Download PDF</button>
          <button type="button" className="op-btn op-btn-ghost" onClick={() => open(false)}>View full <span aria-hidden="true">&rarr;</span></button>
        </div>
      </div>
    </article>
  );
}

function OnePagerCards() {
  const [active, setActive] = React.useState(null);
  return (
    <React.Fragment>
      <h2 id="one-pagers">Two one-pagers for BIO</h2>
      <p className="op-intro">We drafted two reactive options rather than finished pieces, each shaped for a specific audience surface. The umbrella variant carries the longevity frame for longevity-investor and open-pharma BD conversations; the Lilly TuneLabs variant carries the Notch frame for Lilly's named-door intake and adjacent defined-door pharma channels. You can view and download each as a one-page PDF.</p>
      <div className="op-cards">
        <OnePagerCard
          file="onepager-umbrella"
          kicker="Umbrella variant"
          title="Longevity by restoring a vibrant immune system"
          desc="For longevity-investor + open-pharma BD. One mechanism, a basket of indications, ProT-096 as the credibility anchor, and an open-conversation close."
          onOpen={setActive}
        />
        <OnePagerCard
          file="onepager-lilly"
          kicker="Lilly TuneLabs variant"
          title="A targeted Notch-activator platform for immune reconstitution"
          desc="For Lilly TuneLabs + adjacent defined-door pharma. Clinical problem, mechanism, ProT-096 + Cellares, and a focused TuneLabs collaboration proposal."
          onOpen={setActive}
        />
      </div>
      {active && <OnePagerModal item={active} onClose={() => setActive(null)} />}
    </React.Fragment>
  );
}

Object.assign(window, { OnePagerCards });