// handoff.jsx — handoff.html (interstitial before leaving to a partner or provider)

function readHandoffItem() {
  const p = new URLSearchParams(location.search);
  const id = p.get("item");
  const item = id && getItem(id);
  return item && item.mode !== "buy" ? item : getItem("agent-crm-copilot");
}

function HandoffPage() {
  const item = readHandoffItem();
  const [count, setCount] = React.useState(5);

  React.useEffect(() => {
    if (count <= 0) return;
    const t = setTimeout(() => setCount((c) => c - 1), 1000);
    return () => clearTimeout(t);
  }, [count]);

  const goNow = () => { setCount(0); };
  const isProvider = item.mode === "provider";

  return (
    <Section id="handoff">
      <div className="handoff-wrap glass">
        <div className="handoff-icon"><Icon name={isProvider ? "external-link" : "handshake"} size={26} /></div>
        <ModeChip mode={item.mode} />
        <h1 className="h1" style={{ fontSize: "clamp(1.6rem, 3vw, 2.2rem)" }}>Leaving store.aaas.love.</h1>
        <p className="lead" style={{ margin: "0 auto" }}>
          You're headed to <b>{item.provider.name}</b> to {isProvider ? "book" : "activate"} <b>{item.name}</b>.
        </p>

        <ul className="handoff-list">
          <li><Icon name="arrow-right" size={16} className="fg-circuit" /><span className="body-sm"><b>Where you're going:</b> {item.provider.name}'s own {isProvider ? "booking page" : "sign-up flow"}, outside store.aaas.love.</span></li>
          <li><Icon name="handshake" size={16} className="fg-circuit" /><span className="body-sm"><b>What we get:</b> {isProvider ? "Nothing from this visit — we vet providers up front, not per referral." : "A referral fee if you activate, disclosed on the listing."}</span></li>
          <li><Icon name="shield-check" size={16} className="fg-circuit" /><span className="body-sm"><b>What stays with us:</b> Nothing of yours. {item.provider.name} handles the account, billing and data from here.</span></li>
        </ul>

        <DisclosureLine item={item} />

        <div className="handoff-actions">
          <button type="button" className="btn btn-primary" onClick={goNow}>Continue to {item.provider.name}</button>
          <a className="btn btn-outline" href={`pdp-${item.mode}.html?item=${item.id}`}>Go back</a>
        </div>
        <p className="handoff-countdown body-sm">
          {count > 0 ? `Continuing automatically in ${count}s…` : `Ready — click continue above (no external network call is made in this prototype).`}
        </p>
      </div>
    </Section>
  );
}

window.__PAGE__ = HandoffPage;