// ╔══════════════════════════════════════════════════════════════════╗
// ║  teaser.jsx — "results ready" paywall shown in the tease flow      ║
// ║  (?flow=tease). After the scan animation plays, this renders a     ║
// ║  BLURRED decoy preview behind a lock card with an                  ║
// ║  "Unlock for X tokens" CTA. The decoy is decorative (no real       ║
// ║  data) — the real scan only runs when the customer unlocks/pays.   ║
// ╚══════════════════════════════════════════════════════════════════╝
(function () {
  "use strict";
  const fmt = (n) => (window.formatTokens ? window.formatTokens(n) : n);

  // Believable teaser copy per scan type (counts are illustrative, not real data).
  function teaserMeta(scan) {
    switch (scan.id) {
      case "new-person":
        return { found: "14 records found", noun: "report",
                 lines: ["Full name & known aliases", "Address history", "Phone, email & socials", "Dating-app activity"] };
      case "face":
        return { found: "16 potential matches", noun: "matches",
                 lines: ["Across 200+ platforms", "Social & dating profiles", "Match-confidence scores"] };
      case "dating-app":
        return { found: "8 profiles found", noun: "profiles",
                 lines: ["Across 40+ dating apps", "Recent activity & last seen", "Photos, bio & distance"] };
      case "tinder-sonar":
        return { found: "Profile located", noun: "result",
                 lines: ["Last-active status", "Whether they saw your profile", "What they did next"] };
      default:
        return { found: "Results ready", noun: "report", lines: ["Full report compiled"] };
    }
  }

  // A grid of blurred skeleton "profile" cards behind the lock card.
  function Decoy() {
    const cells = [];
    for (let i = 0; i < 8; i++) cells.push(i);
    return (
      <div className="teaser__decoy" aria-hidden="true">
        <div className="teaser__decoy-grid">
          {cells.map((i) => (
            <div className="teaser__dcard" key={i}>
              <div className="teaser__dphoto" />
              <div className="teaser__dline teaser__dline--name" />
              <div className="teaser__dline teaser__dline--sub" />
            </div>
          ))}
        </div>
        <div className="teaser__decoy-fade" />
      </div>
    );
  }

  function TeaserPaywall({ scan, subject, balance, onUnlock, onTopUp, onClose }) {
    if (!scan) return null;
    const meta = teaserMeta(scan);
    const cost = scan.cost || 0;
    const enough = (Number(balance) || 0) >= cost;
    const IconLockC = window.IconLock || (() => null);
    const IconCheckC = window.IconCheck || (() => null);
    const IconArrowRightC = window.IconArrowRight || (() => null);
    const IconArrowLeftC = window.IconArrowLeft || (() => null);

    return (
      <div className="teaser" data-screen-label={"04 Unlock — " + scan.name} style={{ ["--accent"]: scan.color }}>
        <button className="linkback" onClick={onClose}>
          <IconArrowLeftC size={14} /> Back to Dashboard
        </button>

        <div className="teaser__stage">
          <Decoy />

          <div className="teaser__lockcard">
            <span className="teaser__lockicon"><IconLockC size={22} /></span>
            <div className="teaser__found">{meta.found}{subject ? <> for <strong>{subject}</strong></> : null}</div>
            <h2 className="teaser__title">Your {scan.name} {meta.noun} is ready</h2>

            <ul className="teaser__list">
              {meta.lines.map((l, i) => (
                <li key={i}><span className="teaser__tick"><IconCheckC size={12} /></span>{l}</li>
              ))}
            </ul>

            {enough ? (
              <button className="sw-btn sw-btn--lg teaser__cta" onClick={onUnlock}>
                Unlock for {fmt(cost)} tokens <IconArrowRightC size={16} />
              </button>
            ) : (
              <button className="sw-btn sw-btn--lg teaser__cta" onClick={onTopUp}>
                Top up to unlock <IconArrowRightC size={16} />
              </button>
            )}

            <div className="teaser__bal">
              Balance: {fmt(balance)} tokens
              {enough ? null : <> · need {fmt(cost - (Number(balance) || 0))} more</>}
            </div>
            <div className="teaser__assure"><IconLockC size={12} /> Generated the moment you unlock · tokens only spent on unlock</div>
          </div>
        </div>
      </div>
    );
  }

  if (!document.getElementById("teaser-styles")) {
    const s = document.createElement("style");
    s.id = "teaser-styles";
    s.textContent = `
      .teaser{max-width:1100px;}
      .teaser__stage{position:relative;border-radius:20px;overflow:hidden;min-height:520px;
        background:linear-gradient(180deg,#F8FAFF,#EEF2FB);border:1px solid var(--sw-divider);}
      /* blurred decoy */
      .teaser__decoy{position:absolute;inset:0;filter:blur(9px) saturate(1.05);transform:scale(1.04);
        opacity:.9;pointer-events:none;user-select:none;padding:26px;}
      .teaser__decoy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
      .teaser__dcard{background:#fff;border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(15,23,42,.08);}
      .teaser__dphoto{width:100%;aspect-ratio:1/1;border-radius:12px;
        background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#3B5BF5) 55%,#cdd6ea),#dfe6f5);}
      .teaser__dline{height:12px;border-radius:6px;margin-top:10px;background:#dde3ef;}
      .teaser__dline--name{width:62%;}
      .teaser__dline--sub{width:42%;height:9px;margin-top:7px;background:#e7ebf3;}
      .teaser__decoy-fade{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,rgba(248,250,255,.2),rgba(238,242,251,.86));}
      /* lock card */
      .teaser__lockcard{position:relative;z-index:2;max-width:430px;margin:0 auto;top:54px;
        background:#fff;border-radius:22px;padding:30px 30px 26px;text-align:center;
        box-shadow:0 30px 70px rgba(15,23,42,.26);border:1px solid rgba(15,23,42,.06);}
      .teaser__lockicon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
        border-radius:999px;color:#fff;background:var(--accent,#3B5BF5);
        box-shadow:0 10px 24px color-mix(in srgb,var(--accent,#3B5BF5) 45%,transparent);margin-bottom:6px;}
      .teaser__found{margin-top:10px;font-size:13px;font-weight:700;color:var(--accent,#3B5BF5);
        text-transform:uppercase;letter-spacing:.04em;}
      .teaser__title{font-size:23px;font-weight:900;color:#0F172A;letter-spacing:-.02em;margin:6px 0 14px;}
      .teaser__list{list-style:none;margin:0 0 20px;padding:0;text-align:left;display:inline-block;}
      .teaser__list li{display:flex;align-items:center;gap:9px;color:#334155;font-size:14px;font-weight:500;
        padding:5px 0;}
      .teaser__tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
        border-radius:999px;background:#E8F7EE;color:#16A34A;flex:none;}
      .teaser__cta{width:100%;background:var(--accent,#3B5BF5);}
      .teaser__cta:hover{filter:brightness(1.05);}
      .teaser__bal{margin-top:12px;font-size:13px;color:#64748B;font-weight:600;}
      .teaser__assure{margin-top:14px;font-size:12px;color:#94A3B8;display:flex;align-items:center;
        justify-content:center;gap:6px;}
      @media (max-width:880px){
        .teaser__stage{min-height:480px;}
        .teaser__decoy-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
        .teaser__lockcard{top:30px;max-width:none;margin:0 10px;padding:24px 20px 22px;}
        .teaser__title{font-size:20px;}
      }
    `;
    document.head.appendChild(s);
  }

  Object.assign(window, { TeaserPaywall });
})();