// Modals: Dating App example, Face Scan example, Insufficient tokens.

const { useState: useStateM, useEffect: useEffectM } = React;

// ------ Shared modal shell ------
function Modal({ open, onClose, children, className = "", labelledBy }) {
  useEffectM(() => {
    if (!open) return;
    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;
    };
  }, [open]);

  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div
        className={"modal " + className}
        role="dialog"
        aria-modal="true"
        aria-labelledby={labelledBy}
        onClick={(e) => e.stopPropagation()}>
        
        {children}
      </div>
    </div>);

}

// =====================================================================
// Dating App Example — preview card (in-page) + full modal
// =====================================================================
function DatingAppExamplePreview({ onOpen }) {
  return (
    <div className="example-card example-card--pink">
      <div className="example-card__header">Example</div>
      <div className="example-card__body">
        <img className="example-card__photo" src={PROFILE_IMAGES[0]} alt="Example profile" />
        <div className="example-card__main">
          <div className="example-card__name">Jessica, 27 years old</div>
          <div className="example-card__bio">
            Looking for my partner in crime 💕 Love hiking, Netflix and tacos.
          </div>
          <div className="example-card__pills">
            <span className="example-pill example-pill--pink">Active Today</span>
            <span className="example-pill example-pill--pink">Verified Profile</span>
          </div>
          <button type="button" className="example-card__cta" onClick={onOpen}>
            See the Example <IconArrowRight size={14} />
          </button>
        </div>
      </div>
    </div>);

}

function DatingAppExampleModal({ open, onClose }) {
  const platforms = [
  { id: "tinder", name: "Tinder" },
  { id: "bumble", name: "Bumble" },
  { id: "hinge", name: "Hinge" },
  { id: "onlyfans", name: "Only Fans" }];

  return (
    <Modal open={open} onClose={onClose} className="modal--lg" labelledBy="ex-dating-title">
      <button className="modal__close" onClick={onClose} aria-label="Close">
        <IconX size={20} />
      </button>
      <div className="modal__sample-tag">Example result</div>

      <div className="modal__body">
        <h2 id="ex-dating-title" className="modal__title">Sample Dating App Scan result</h2>
        <p className="modal__subtitle">This is what your report will look like once the scan completes.</p>

        {/* Photo grid */}
        <div className="ex-photogrid">
          <img src={PROFILE_IMAGES[0]} alt="" className="ex-photogrid__cell" />
          <img src={PROFILE_IMAGES[1]} alt="" className="ex-photogrid__cell" />
          <img src={PROFILE_IMAGES[2]} alt="" className="ex-photogrid__cell" />
          <img src={PROFILE_IMAGES[3]} alt="" className="ex-photogrid__cell" />
          <img src={PROFILE_IMAGES[4]} alt="" className="ex-photogrid__cell" />
          <img src={PROFILE_IMAGES[5]} alt="" className="ex-photogrid__cell" />
        </div>

        {/* Active platforms */}
        <div className="ex-section">
          <div className="ex-section__label">Active Profile On</div>
          <div className="ex-platforms">
            {platforms.map((p) =>
            <div key={p.id} className="ex-platform">
                <img src={PLATFORM_LOGOS[p.id]} alt="" className="ex-platform__logo" />
                <span className="ex-platform__name">{p.name}</span>
              </div>
            )}
          </div>
        </div>

        {/* Update profile */}
        <div className="ex-section">
          <div className="ex-section__label">Update Profile</div>
          <div className="ex-checkrows">
            {["Detected on Tinder", "Update photos", "Update BIO", "Update activity"].map((t) =>
            <div key={t} className="ex-checkrow">
                <span>{t}</span>
                <span className="ex-checkrow__check"><IconCheck size={16} /></span>
              </div>
            )}
          </div>
        </div>

        {/* Profile */}
        <div className="ex-section">
          <div className="ex-section__label">Profile</div>
          <div className="ex-keyvals">
            <div><span className="ex-kv__k">Name</span><span className="ex-kv__v">Jessica</span></div>
            <div><span className="ex-kv__k">Age</span><span className="ex-kv__v">27</span></div>
            <div><span className="ex-kv__k">Gender</span><span className="ex-kv__v">Woman</span></div>
            <div><span className="ex-kv__k">Profile detected at</span><span className="ex-kv__v">2 km</span></div>
          </div>
        </div>

        {/* BIO */}
        <div className="ex-section">
          <div className="ex-section__label">Bio</div>
          <p className="ex-bio">
            Looking for my partner in crime 💕<br />
            Love hiking, Netflix and tacos.
          </p>
        </div>

        {/* Italicized highlights */}
        <div className="ex-highlights">
          <div className="ex-highlight"><em>Recently active on Tinder:</em> <span className="ex-checkrow__check"><IconCheck size={16} /></span></div>
          <div className="ex-highlight"><em>Tinder+ subscriber:</em> <span className="ex-checkrow__check"><IconCheck size={16} /></span></div>
        </div>

        {/* AI Matching */}
        <div className="ex-section">
          <div className="ex-section__label">AI Matching Score</div>
          <div className="ex-scorerows">
            <div className="ex-scorerow"><span>Name</span><span className="ex-pill-green">100%</span></div>
            <div className="ex-scorerow"><span>Distance</span><span className="ex-pill-green">2km</span></div>
            <div className="ex-scorerow"><span>Age</span><span className="ex-pill-green">85%</span></div>
          </div>
        </div>
      </div>

      <div className="modal__foot">
        <button className="modal__cta modal__cta--pink" onClick={onClose}>
          Close the example
        </button>
      </div>
    </Modal>);

}

// =====================================================================
// Face Scan Example
// =====================================================================
const ELON_REF = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfJnXrESFhef2suanOB3FfuJAq4xUF0jn2Lw&s";

const FACE_EXAMPLE_MATCHES = [
{ id: "m1", platform: "Instagram", score: 94, photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQvbBkan9f5Y_lGtjeuDAU_GHcoaHBhd9GEw&s" },
{ id: "m2", platform: "LinkedIn", score: 87, photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgnt7fK81F3rp1agUCiHndXhqx0S09EEOGsA&s" },
{ id: "m3", platform: "Instagram", score: 85, photo: "https://imageio.forbes.com/specials-images/imageserve/62d700cd6094d2c180f269b9/0x0.jpg?format=jpg&crop=959,959,x0,y0,safe&height=416&width=416&fit=bounds" },
{ id: "m4", platform: "Facebook", score: 83, photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1OLpe5CYNqmUXQ5TgCfoTl9fFYUYVzWF-rw&s" },
{ id: "m5", platform: "Instagram", score: 81, photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRC2qo-qGFIgyXR9iXDQE8QSffaEjKaC55Zyg&s" },
{ id: "m6", platform: "YouTube", score: 75, photo: "https://cdn.i-scmp.com/sites/default/files/styles/768x768/public/d8/images/canvas/2021/12/31/576b62aa-d61e-4786-9943-179a5f7fcabc_b2a8806a.jpg?itok=NxfQS1JD&v=1640929723" },
{ id: "m7", platform: "LinkedIn", score: 63, photo: "https://lookalikes.co.uk/wp-content/uploads/2021/10/48860643-c236-46de-bbe1-82ec0ffbc7b8.jpg" },
{ id: "m8", platform: "YouTube", score: 60, photo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6SeHMoqCqBP39tAJ0GtQqbzgLCJvoTBl8KQ&s" }];


const PLATFORM_GLYPH = {
  Instagram: { letter: "Ig", bg: "linear-gradient(135deg, #F58529 0%, #DD2A7B 45%, #8134AF 100%)", fg: "white" },
  LinkedIn: { letter: "in", bg: "#0A66C2", fg: "white" },
  Facebook: { letter: "f", bg: "#1877F2", fg: "white" },
  YouTube: { letter: "▶", bg: "#FF0000", fg: "white" }
};

const faceExampleTier = (score) =>
score >= 90 ? { id: "green", label: "Perfect match" } :
score >= 83 ? { id: "orange", label: "Confident match" } :
score >= 70 ? { id: "yellow", label: "Uncertain" } :
{ id: "gray", label: "Weak match" };

function FaceScanExamplePreview({ onOpen }) {
  return (
    <div className="example-card example-card--blue">
      <div className="example-card__header example-card__header--blue">Example</div>
      <div className="example-card__body example-card__body--compact">
        <img className="example-card__photo example-card__photo--sm" src={ELON_REF} alt="Reference subject" />
        <div className="example-card__main">
          <div className="ex-faces-found">
            8 profiles found
          </div>
          <div className="ex-faces-best">
            Highest match: <strong>94%</strong>
          </div>
          <div className="example-card__pills">
            <span className="example-pill example-pill--blue-solid">Identity confirmed</span>
            <span className="example-pill example-pill--purple">Public figure detected</span>
          </div>
          <button type="button" className="example-card__cta example-card__cta--blue" onClick={onOpen}>
            See full example <IconArrowRight size={14} />
          </button>
        </div>
      </div>
    </div>);

}

function FaceScanExampleModal({ open, onClose }) {
  return (
    <Modal open={open} onClose={onClose} className="modal--lg" labelledBy="ex-face-title">
      <button className="modal__close" onClick={onClose} aria-label="Close">
        <IconX size={20} />
      </button>
      <div className="modal__sample-tag modal__sample-tag--blue">Example result</div>

      <div className="modal__banner modal__banner--info">
        <IconInfo size={14} />
        This is a sample result using a public figure. Your actual scan will use the photo you upload.
      </div>

      <div className="modal__body">
        <h2 id="ex-face-title" className="modal__title">Sample Face Scan result</h2>
        <p className="modal__subtitle">A photo-by-photo match report across image-indexed platforms.</p>

        {/* Header bar */}
        <div className="face-ex-header">
          <img className="face-ex-header__photo" src={ELON_REF} alt="" />
          <div className="face-ex-header__name">
            <div className="face-ex-header__label">Subject</div>
            <div className="face-ex-header__value">Elon Musk</div>
          </div>
          <div className="face-ex-header__divider" aria-hidden />
          <div className="face-ex-header__stat">
            <div className="face-ex-header__label">Confidence</div>
            <div className="face-ex-header__value face-ex-header__value--green">94% match</div>
          </div>
          <div className="face-ex-header__stat">
            <div className="face-ex-header__label">Profiles found</div>
            <div className="face-ex-header__value">8</div>
          </div>
        </div>

        {/* Disclaimer */}
        <div className="face-ex-disclaimer">
          <span className="face-ex-disclaimer__icon"><IconInfo size={14} /></span>
          <span>
            Many people who are unrelated can look similar. Never rely solely on a face recognition search.
            Always cross-reference multiple sources before forming an opinion about someone.
          </span>
        </div>

        {/* Legend */}
        <div className="face-ex-legend">
          <span className="face-ex-legend__pill face-ex-legend__pill--green">  90–100 · Perfect match  </span>
          <span className="face-ex-legend__pill face-ex-legend__pill--orange"> 83–89 · Confident match </span>
          <span className="face-ex-legend__pill face-ex-legend__pill--yellow"> 70–82 · Uncertain       </span>
          <span className="face-ex-legend__pill face-ex-legend__pill--gray">   50–69 · Weak match     </span>
        </div>

        {/* Match grid */}
        <div className="face-ex-grid">
          {FACE_EXAMPLE_MATCHES.map((m) => {
            const tier = faceExampleTier(m.score);
            const glyph = PLATFORM_GLYPH[m.platform] || { letter: "?", bg: "#94A3B8", fg: "white" };
            return (
              <div key={m.id} className="face-ex-card">
                <div className="face-ex-card__media">
                  <img src={m.photo} alt="" loading="lazy"
                  onError={(e) => {e.currentTarget.style.background = "var(--sw-surface-2)";}} />
                  <span className="face-ex-card__plat" style={{ padding: "2px 8px 3px 3px" }}>
                    <span className="face-ex-card__plat-glyph"
                    style={{ background: glyph.bg, color: glyph.fg }}>
                      {glyph.letter}
                    </span>
                    <span className="face-ex-card__plat-name">{m.platform}</span>
                  </span>
                  <span className={"face-ex-card__score face-ex-card__score--" + tier.id}>{m.score}</span>
                </div>
                <div className="face-ex-card__body">
                  <span className={"face-ex-card__tier face-ex-card__tier--" + tier.id}>
                    <span className="face-ex-card__tier-dot" />
                    {tier.label}
                  </span>
                </div>
              </div>);

          })}
        </div>

        <div className="sonar-demo-note">
          <IconInfo size={12} />
          This is an example. Actual results vary by subject.
        </div>
      </div>

      <div className="modal__foot">
        <button className="modal__cta modal__cta--blue" onClick={onClose}>
          Close the example
        </button>
      </div>
    </Modal>);

}


// =====================================================================
// New Person Check Example — preview card + full report modal
// =====================================================================
function NewPersonExamplePreview({ onOpen }) {
  return (
    <div className="example-card example-card--blue">
      <div className="example-card__header example-card__header--blue">Example Result</div>
      <div className="example-card__body example-card__body--compact">
        <img className="example-card__photo example-card__photo--sm" src="assets/example-person.jpg" alt="Example profile" />
        <div className="example-card__main">
          <div className="example-card__name">Michael T., 31</div>
          <div className="npc-pre__meta">New York, NY · Works at Deloitte</div>
          <div className="example-card__pills">
            <span className="example-pill example-pill--blue-solid">12 profiles found</span>
            <span className="example-pill example-pill--green">Recently active</span>
          </div>
          <button type="button" className="example-card__cta example-card__cta--blue" onClick={onOpen}>
            See full example <IconArrowRight size={14} />
          </button>
        </div>
      </div>
    </div>);

}

function NewPersonExampleModal({ open, onClose }) {
  const socials = [
  { id: "instagram", name: "Instagram", logo: SOCIAL_LOGOS.instagram, found: true },
  { id: "linkedin", name: "LinkedIn", logo: SOCIAL_LOGOS.linkedin, found: true },
  { id: "twitter", name: "X (Twitter)", logo: SOCIAL_LOGOS.x, found: true },
  { id: "facebook", name: "Facebook", logo: SOCIAL_LOGOS.facebook, found: false }];

  return (
    <Modal open={open} onClose={onClose} className="modal--lg" labelledBy="ex-npc-title">
      <button className="modal__close" onClick={onClose} aria-label="Close">
        <IconX size={20} />
      </button>
      <div className="modal__sample-tag modal__sample-tag--blue">Example result</div>

      <div className="modal__banner modal__banner--info">
        <IconInfo size={14} />
        This is a sample result. Your actual report will reflect real data.
      </div>

      <div className="modal__body">
        <h2 id="ex-npc-title" className="modal__title">Sample Person Check report</h2>
        <p className="modal__subtitle">An end-to-end identity sweep across 100+ public sources.</p>

        {/* Header card */}
        <div className="npc-header">
          <img className="npc-header__photo" src="assets/example-person.jpg" alt="" />
          <div className="npc-header__body">
            <div className="npc-header__name">Michael T.</div>
            <div className="npc-header__meta">
              <span><strong>Age</strong> 31</span>
              <span className="npc-header__dot" aria-hidden />
              <span><strong>Location</strong> Brooklyn, New York</span>
            </div>
          </div>
        </div>

        {/* Identity */}
        <div className="ex-section">
          <div className="ex-section__label">Identity</div>
          <div className="npc-kv">
            <div><span>Full name</span><span className="npc-kv__v">Michael Thomas <span className="ex-redact__blur">•••••</span></span></div>
            <div><span>Age</span><span className="npc-kv__v">31</span></div>
            <div><span>Gender</span><span className="npc-kv__v">Male</span></div>
            <div><span>Location</span><span className="npc-kv__v">Brooklyn, NY</span></div>
            <div><span>Employer</span><span className="npc-kv__v">Deloitte</span></div>
            <div><span>Previous city</span><span className="npc-kv__v">Chicago, IL</span></div>
          </div>
        </div>

        {/* Contact */}
        <div className="ex-section">
          <div className="ex-section__label">Contact Details</div>
          <div className="npc-kv">
            <div><span>Email</span><span className="npc-kv__v">m.thomas@<span className="ex-redact__blur">••••</span>.com</span></div>
            <div><span>Phone</span><span className="npc-kv__v">+1 (917) 555-<span className="ex-redact__blur">•••••</span></span></div>
            <div><span>LinkedIn</span><span className="npc-kv__v">linkedin.com/in/<span className="ex-redact__blur">•••••</span></span></div>
          </div>
        </div>

        {/* Socials */}
        <div className="ex-section">
          <div className="ex-section__label">Social Profiles</div>
          <div className="npc-socials">
            {socials.map((s) =>
            <div key={s.id} className={"npc-social" + (s.found ? "" : " npc-social--missing")}>
                <span className="npc-social__icon npc-social__icon--logo">
                  <img src={s.logo} alt="" />
                </span>
                <div className="npc-social__name">{s.name}</div>
                <div className={"npc-social__status" + (s.found ? " is-found" : "")}>
                  {s.found ? <><IconCheck size={11} /> Profile found</> : "Not found"}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Dating Activity */}
        <div className="ex-section">
          <div className="ex-section__label">Dating Activity</div>
          <div className="npc-rows">
            <div className="npc-row">
              <span className="npc-row__platform"><img src={PLATFORM_LOGOS.tinder} alt="" /> Tinder</span>
              <span className="sonar-badge sonar-badge--good"><IconCheck size={11} /> Active profile detected</span>
            </div>
            <div className="npc-row">
              <span className="npc-row__platform"><img src={PLATFORM_LOGOS.bumble} alt="" /> Bumble</span>
              <span className="sonar-badge sonar-badge--muted">No profile found</span>
            </div>
            <div className="npc-row">
              <span className="npc-row__platform"><img src={PLATFORM_LOGOS.hinge} alt="" /> Hinge</span>
              <span className="sonar-badge sonar-badge--good"><IconCheck size={11} /> Last active 4 days ago</span>
            </div>
          </div>
        </div>

        {/* Public Records */}
        <div className="ex-section">
          <div className="ex-section__label">Public Records</div>
          <div className="npc-records">
            <div className="npc-records__row">
              <span>Criminal record</span>
              <span className="npc-records__v npc-records__v--ok"><IconCheck size={12} /> None found</span>
            </div>
            <div className="npc-records__row">
              <span>Court cases</span>
              <span className="npc-records__v npc-records__v--ok"><IconCheck size={12} /> None found</span>
            </div>
            <div className="npc-records__row">
              <span>Address history</span>
              <span className="npc-records__v">3 addresses on record</span>
            </div>
            <div className="npc-records__row">
              <span>Last known address</span>
              <span className="npc-records__v">Brooklyn, NY <span className="npc-records__sub">(2023–present)</span></span>
            </div>
          </div>
        </div>

        {/* Current Status */}
        <div className="ex-section ex-section--last">
          <div className="ex-section__label">Current Status</div>
          <div className="npc-current">
            <span className="npc-current__dot" />
            This person appears to be currently active online.
          </div>
        </div>

        <div className="sonar-demo-note">
          <IconInfo size={12} />
          This is an example. Actual results vary by subject.
        </div>
      </div>

      <div className="modal__foot">
        <button className="modal__cta modal__cta--blue" onClick={onClose}>
          Close the example
        </button>
      </div>
    </Modal>);

}

// =====================================================================
// Tinder Sonar Example — preview card + full modal
// =====================================================================
function TinderSonarExamplePreview({ onOpen }) {
  return (
    <div className="example-card example-card--red">
      <div className="example-card__header example-card__header--red">Example</div>
      <div className="example-card__body example-card__body--compact">
        <img className="example-card__photo example-card__photo--sm" src={PROFILE_IMAGES[1]} alt="Example profile" />
        <div className="example-card__main">
          <div className="example-card__name">Alex, 29</div>
          <div className="ex-sonar-status">
            <span className="ex-sonar-status__dot" />
            Viewed your profile
          </div>
          <div className="example-card__pills">
            <span className="example-pill example-pill--red-solid">Swiped Left</span>
            <span className="example-pill example-pill--muted">Last active 2 days ago</span>
          </div>
          <button type="button" className="example-card__cta example-card__cta--red" onClick={onOpen}>
            See the Example <IconArrowRight size={14} />
          </button>
        </div>
      </div>
    </div>);

}

function TinderSonarExampleModal({ open, onClose }) {
  return (
    <Modal open={open} onClose={onClose} className="modal--md" labelledBy="ex-sonar-title">
      <button className="modal__close" onClick={onClose} aria-label="Close">
        <IconX size={20} />
      </button>
      <div className="modal__sample-tag modal__sample-tag--red">Example result</div>

      <div className="modal__body">
        <h2 id="ex-sonar-title" className="modal__title">Sample Tinder Sonar result</h2>
        <p className="modal__subtitle">This is what your report will look like once the scan completes.</p>

        {/* Subject header */}
        <div className="sonar-subject">
          <img className="sonar-subject__photo" src={PROFILE_IMAGES[1]} alt="" />
          <div className="sonar-subject__body">
            <div className="sonar-subject__name">Alex, 29</div>
            <div className="sonar-subject__meta">
              <span><IconMapPin size={12} /> Brooklyn, NY</span>
              <span className="sonar-subject__dot" aria-hidden />
              <span><IconClock size={12} /> Last active 2 days ago</span>
            </div>
          </div>
        </div>

        {/* Sonar Results */}
        <div className="ex-section">
          <div className="ex-section__label">Sonar Results</div>
          <div className="sonar-rows">
            <div className="sonar-row">
              <span className="sonar-row__signal"><IconRadar size={14} /> Profile detected</span>
              <span className="sonar-badge sonar-badge--good"><IconCheck size={12} /> Found</span>
            </div>
            <div className="sonar-row">
              <span className="sonar-row__signal"><IconEye size={14} /> Viewed your profile</span>
              <span className="sonar-badge sonar-badge--good"><IconCheck size={12} /> Yes — 3 days ago</span>
            </div>
            <div className="sonar-row">
              <span className="sonar-row__signal"><IconHeart size={14} /> Swipe action</span>
              <span className="sonar-badge sonar-badge--bad"><IconX size={12} /> Swiped Left</span>
            </div>
          </div>
        </div>

        {/* Activity Timeline */}
        <div className="ex-section">
          <div className="ex-section__label">Activity Timeline</div>
          <ol className="sonar-timeline">
            <li className="sonar-timeline__item">
              <span className="sonar-timeline__date">May 16</span>
              <span className="sonar-timeline__txt">Profile located in Brooklyn area</span>
            </li>
            <li className="sonar-timeline__item">
              <span className="sonar-timeline__date">May 17</span>
              <span className="sonar-timeline__txt">Your profile appeared in their feed</span>
            </li>
            <li className="sonar-timeline__item">
              <span className="sonar-timeline__date">May 17</span>
              <span className="sonar-timeline__txt">Swiped left, session ended shortly after</span>
            </li>
          </ol>
        </div>

        {/* Match Probability */}
        <div className="ex-section">
          <div className="ex-section__label">Match Probability</div>
          <div className="sonar-prob">
            <div className="sonar-prob__row">
              <span>Re-match probability</span>
              <span className="sonar-prob__verdict">Low</span>
            </div>
            <div className="sonar-prob__bar">
              <span className="sonar-prob__fill" style={{ width: "15%" }} />
            </div>
          </div>
        </div>

        <div className="sonar-demo-note">
          <IconInfo size={12} />
          This is an example. Actual results vary by subject.
        </div>
      </div>

      <div className="modal__foot">
        <button className="modal__cta modal__cta--red" onClick={onClose}>
          Close the example
        </button>
      </div>
    </Modal>);

}

// =====================================================================
// Insufficient tokens modal
// =====================================================================
function InsufficientTokensModal({ open, onClose, scan, balance, onTopUp }) {
  if (!scan) return null;
  const cost = scan.cost;
  const need = Math.max(0, cost - balance);
  return (
    <Modal open={open} onClose={onClose} className="modal--sm" labelledBy="insuff-title">
      <button className="modal__close" onClick={onClose} aria-label="Close">
        <IconX size={20} />
      </button>
      <div className="insuff">
        <span className="insuff__icon">
          <IconChip size={28} />
        </span>
        <h3 id="insuff-title" className="insuff__title">You need more tokens</h3>
        <p className="insuff__sub">
          You don't have enough tokens to run this scan. Top up your balance to continue.
        </p>

        <div className="insuff__rows">
          <div className="insuff__row">
            <span>Your balance</span>
            <span className="insuff__row-v">{formatTokens(balance)} tokens</span>
          </div>
          <div className="insuff__row">
            <span>This scan costs</span>
            <span className="insuff__row-v">{formatTokens(cost)} tokens</span>
          </div>
          <div className="insuff__row insuff__row--need">
            <span>You need</span>
            <span className="insuff__row-v">{formatTokens(need)} more tokens</span>
          </div>
        </div>

        <div className="insuff__actions">
          <button className="sw-btn insuff__cta" onClick={onTopUp}>
            Top Up Now <IconArrowRight size={16} />
          </button>
          <button className="insuff__cancel" onClick={onClose}>Cancel</button>
        </div>
      </div>
    </Modal>);

}

// =====================================================================
// Face Scan waiver — terms & liability before running a face search
// =====================================================================
function FaceWaiverModal({ open, onClose, onAgree, scan }) {
  const [agreed, setAgreed] = useStateM(false);
  useEffectM(() => {if (open) setAgreed(false);}, [open]);
  if (!scan) return null;
  return (
    <Modal open={open} onClose={onClose} className="modal--md" labelledBy="waiver-title">
      <button className="modal__close" onClick={onClose} aria-label="Close">
        <IconX size={20} />
      </button>
      <div className="waiver">
        <div className="waiver__head">
          <span className="waiver__icon">
            <IconShield size={24} />
          </span>
          <div>
            <h3 id="waiver-title" className="waiver__title">Terms of Use & Liability Waiver</h3>
            <p className="waiver__sub">
              Face Scan is a powerful tool. Please read and confirm the terms below before we run it.
            </p>
          </div>
        </div>

        <div className="waiver__body">
          <div className="waiver__affirm">
            I hereby affirm that I am <strong>18 years or older</strong> and I agree that, as a result of this search:
          </div>
          <ul className="waiver__list">
            {FACE_WAIVER_TERMS.map((t, i) =>
            <li key={i} className="waiver__list-item">
                <span className="waiver__bullet"><IconCheck size={11} /></span>
                {t}
              </li>
            )}
          </ul>
          <div className="waiver__notice">
            <span className="waiver__notice-icon"><IconLock size={14} /></span>
            <span>Match scores reflect visual similarity only. Many unrelated people look alike — never rely solely on a face search and always cross-reference multiple sources before forming an opinion about a person.</span>
          </div>
        </div>

        <label className="waiver__check">
          <input
            type="checkbox"
            checked={agreed}
            onChange={(e) => setAgreed(e.target.checked)} />
          
          <span className={"waiver__check-box" + (agreed ? " is-on" : "")} aria-hidden>
            {agreed && <IconCheck size={12} />}
          </span>
          <span>I understand and agree to the terms above.</span>
        </label>

        <div className="waiver__footer">
          <div className="waiver__cost">
            This scan will deduct <strong>{formatTokens(scan.cost)} tokens</strong> from your balance.
          </div>
          <div className="waiver__actions">
            <button className="sw-btn sw-btn--ghost" onClick={onClose}>Cancel</button>
            <button
              className="sw-btn"
              disabled={!agreed}
              onClick={() => onAgree && onAgree()}>
              
              Agree and Search <IconArrowRight size={14} />
            </button>
          </div>
        </div>
      </div>
    </Modal>);

}

Object.assign(window, {
  Modal,
  DatingAppExamplePreview, DatingAppExampleModal,
  FaceScanExamplePreview, FaceScanExampleModal,
  NewPersonExamplePreview, NewPersonExampleModal,
  TinderSonarExamplePreview, TinderSonarExampleModal,
  InsufficientTokensModal, FaceWaiverModal
});