/* ProTGen site — reusable section blocks */

/* ---------- Belief sequence: 3 variants ---------- */
function BeliefSequence({ variant = "ladder", dark = false }) {
  const data = window.BELIEFS;
  if (variant === "spine") {
    return (
      <div className="belief-spine">
        {data.map((b) => (
          <div className="bnode" key={b.n}>
            <div className="bdot">{b.n}</div>
            <div className="btext">{b.short}</div>
          </div>
        ))}
      </div>
    );
  }
  if (variant === "cards") {
    return (
      <div className="belief-cards">
        {data.map((b, i) => (
          <div className={"bcard" + (i === 4 ? " accent" : "")} key={b.n}>
            <span className="bnum">{b.n}</span>
            <h4>{b.short}</h4>
          </div>
        ))}
      </div>
    );
  }
  // ladder (default)
  return (
    <div className="belief-ladder">
      {data.map((b) => (
        <div className="brung" key={b.n}>
          <div className="bnum">{b.n}</div>
          <div className="bbody">
            <h4>{b.title}</h4>
            <p>{b.body}</p>
          </div>
          <div className="bmeta">{b.meta}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Proof bridge (horizontal milestone) ---------- */
function ProofBridge() {
  const steps = window.MILESTONES.map((m) => ({ c: m.phase, t: m.h.split(" ").slice(0, 3).join(" "), on: m.status === "on", next: m.status === "next" }));
  const onCount = steps.filter((s) => s.on).length;
  const fillW = ((onCount - 0.5) / steps.length) * 84 + "%";
  return (
    <div className="proof-bridge">
      <div className="track" />
      <div className="track-fill" style={{ width: fillW }} />
      {steps.map((s, i) => (
        <div className="pstep" key={i}>
          <div className="pdot" style={{
            background: s.on ? "var(--gold-500)" : "var(--bone-100)",
            border: "2px solid " + (s.on ? "var(--gold-500)" : s.next ? "var(--teal)" : "var(--slate)"),
          }} />
          <div className="pc" style={{ color: s.on ? "var(--gold-500)" : s.next ? "var(--teal)" : "var(--slate)" }}>{s.c}</div>
          <div className="pt">{window.MILESTONES[i].h}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Milestone timeline (vertical, detailed) ---------- */
function MilestoneTimeline() {
  const data = window.MILESTONES;
  return (
    <div className="milestones">
      {data.map((m, i) => (
        <div className="mrow" key={i}>
          <div className="mphase">{m.phase}</div>
          <div className="mline">
            <div className={"mdot " + m.status} />
            {i < data.length - 1 && <div className="mbar" />}
          </div>
          <div className="mbody">
            <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: 5 }}>
              <h4 style={{ margin: 0 }}>{m.h}</h4>
              <span className={"chip chip-status " + (m.status === "on" ? "on" : m.status === "next" ? "next" : "future")}>
                {m.status === "on" ? "De‑risked" : m.status === "next" ? "In progress" : "Next"}
              </span>
            </div>
            <p>{m.p}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Audience doorways ---------- */
function DoorwayCards({ onOpen }) {
  return (
    <div className="doorways">
      {window.DOORWAYS.map((d) => (
        <div className="doorway reveal" key={d.key} onClick={() => onOpen && onOpen(d.key)}>
          <div className="dw-word">{d.word}</div>
          <h4>{d.h}</h4>
          <p className="dw-need">{d.need}</p>
          <span className="dw-cta">{d.cta} <Icon name="arrow" size={15} /></span>
        </div>
      ))}
    </div>
  );
}

/* ---------- FAQ / objection handling ---------- */
function FaqList({ items }) {
  const list = items || window.FAQS;
  const [open, setOpen] = React.useState(null);
  return (
    <div>
      {list.map((f, i) => (
        <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
          <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
            <span className="qt">{f.q}</span>
            <span className="qi"><Icon name="plus" size={22} /></span>
          </button>
          <div className="faq-a" style={{ maxHeight: open === i ? 360 : 0 }}>
            <div className="faq-a-inner">
              {f.obj && <span className="obj">Objection · {f.obj}</span>}
              {f.a}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Category white-space map ---------- */
function WhitespaceMap() {
  return (
    <div className="whitespace">
      <div className="ws-col">
        <div className="ws-cap">The old frame</div>
        <h4>Attack the disease</h4>
        <p>Modern medicine has become extraordinarily good at killing disease — especially in oncology.</p>
      </div>
      <div className="ws-col">
        <div className="ws-cap">The gap</div>
        <h4>The patient is left compromised</h4>
        <p>Many survive the immediate threat but lack the durable, functional immune protection to recover fully.</p>
      </div>
      <div className="ws-col highlight">
        <div className="ws-cap">The white space</div>
        <h4>Restore immune competence</h4>
        <p>Not another way to attack. A way to rebuild — the therapeutic frontier ProTGen is defining.</p>
      </div>
    </div>
  );
}

/* ---------- Reusable CTA band (dark) ---------- */
function CTABand({ onRequest, title, lead, primary }) {
  return (
    <section className="sec sec-dark field" style={{ textAlign: "center" }}>
      <div className="wrap">
        <Eyebrow tone="">A conversation now</Eyebrow>
        <h2 className="sec-h" style={{ fontSize: 52, margin: "22px auto", maxWidth: "17ch" }}>{title}</h2>
        <p className="lead" style={{ margin: "0 auto 36px" }}>{lead}</p>
        <div className="flex-row" style={{ justifyContent: "center" }}>
          <button className="btn btn-primary btn-lg" onClick={onRequest}>{primary || "Request the briefing deck"} <Icon name="arrow" /></button>
          <button className="btn btn-on-dark btn-lg" onClick={() => go("investors")}>Investors & partners</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BeliefSequence, ProofBridge, MilestoneTimeline, DoorwayCards, FaqList, WhitespaceMap, CTABand });