// Standalone pages: Top Up (redesigned), Privacy Shield.

// ============================================================
// Top Up — cashback layout
// ============================================================
function TopUpPage({ onBack, onPurchase, balance }) {
  return (
    <div className="topuppage" data-screen-label="05 Top Up">
      <button className="linkback" onClick={onBack}>
        <IconArrowLeft size={14} />
        Back to Dashboard
      </button>

      <div className="topuppage__head">
        <h1 className="topuppage__title">Stock up on tokens</h1>
        <p className="topuppage__sub">The more you get, the more you save.</p>
      </div>

      <div className="topup-grid">
        {TOPUP_PACKS.map(p => {
          const featured = p.featured;
          return (
            <div key={p.id} className={"topup-card-v2" + (featured ? " topup-card-v2--featured" : "")}>
              {p.tag && (
                <span className="topup-card-v2__ribbon">
                  <IconStar size={11} />
                  {p.tag}
                </span>
              )}
              {p.save && (
                <span className="topup-card-v2__save">{p.save}</span>
              )}

              <div className="topup-card-v2__name">{p.name}</div>
              <div className="topup-card-v2__price">{p.price}</div>

              <div className="topup-card-v2__base">
                <IconChip size={12} />
                <span className="topup-card-v2__base-strike">{formatTokens(p.chips)} tokens</span>
              </div>

              <div className="cashback-badge">
                +{p.cashback}% cashback
              </div>

              <div className="topup-card-v2__total-label">You get</div>
              <div className="topup-card-v2__total">
                {formatTokens(p.total)} <span className="topup-card-v2__total-unit">tokens</span>
              </div>
              <div className="topup-card-v2__bonusline">
                Includes {formatTokens(p.bonus)} bonus tokens — free
              </div>

              <button
                className={"topup-card-v2__buy" + (featured ? " topup-card-v2__buy--invert" : "")}
                onClick={() => onPurchase(p)}
              >
                Buy {p.name}
                <IconArrowRight size={14} />
              </button>
            </div>
          );
        })}
      </div>

      <div className="topuppage__trust">
        <span><IconLock size={12} /> Secure payment via Stripe</span>
        <span className="topuppage__trust-dot">·</span>
        <span><IconCheck size={12} /> Tokens added instantly</span>
        <span className="topuppage__trust-dot">·</span>
        <span><IconShieldCheck size={12} /> No subscription</span>
      </div>
    </div>
  );
}

// ============================================================
// Privacy Shield page
// ============================================================
function PrivacyShieldPage() {
  return (
    <div className="privacypage" data-screen-label="06 Privacy Shield">
      <div className="shield-hero">
        <div className="shield-hero__fear">
          <h1 className="shield-hero__headline">Right now, anyone can find you.</h1>
          <p className="shield-hero__lede">
            Sweepify is used daily by thousands of people searching for others by name,
            phone, and email. Your information is in the results.
          </p>
          <div className="shield-hero__risks">
            <div className="shield-risk">
              <span className="shield-risk__x"><IconX size={13} /></span>
              Your name is searchable
            </div>
            <div className="shield-risk">
              <span className="shield-risk__x"><IconX size={13} /></span>
              Your location is visible
            </div>
            <div className="shield-risk">
              <span className="shield-risk__x"><IconX size={13} /></span>
              Your activity can be found
            </div>
          </div>
        </div>

        <div className="shield-hero__fix">
          <span className="shield-hero__shield"><IconShieldCheck size={34} /></span>
          <div className="shield-hero__fix-title">Privacy Shield changes that.</div>
          <p className="shield-hero__fix-sub">
            Activate Shield and disappear from every search — instantly.
          </p>
          <button className="sw-btn sw-btn--lg">Get Protected <IconArrowRight size={15} /></button>
        </div>
      </div>

      <div className="shield-tiers-head">
        <h2 className="shield-tiers-head__title">Choose your level of protection</h2>
        <p className="shield-tiers-head__sub">All plans suppress your profile across 100+ people-search sites.</p>
      </div>

      <div className="tier-grid">
        {PRIVACY_TIERS.map(t => (
          <div key={t.id} className={
            "tier-card" +
            (t.popular ? " tier-card--popular" : "") +
            (t.featured ? " tier-card--lifetime" : "")
          }>
            {t.popular && <span className="tier-card__ribbon">Most chosen</span>}
            {t.featured && <span className="tier-card__ribbon tier-card__ribbon--lux">Lifetime</span>}

            <div className="tier-card__name">{t.name}</div>
            <p className="tier-card__desc">{t.desc}</p>

            <div className="tier-card__divider" />

            <div className="tier-card__row">
              <span className="tier-card__row-label">Cost</span>
              <span className="tier-card__row-value">
                <IconChip size={14} />
                {formatTokens(t.chips)} tokens
              </span>
            </div>
            <div className="tier-card__row">
              <span className="tier-card__row-label">Duration</span>
              <span className="tier-card__row-value">{t.duration}</span>
            </div>

            <button className={
              "tier-card__cta sw-btn" +
              (t.featured ? "" : t.popular ? "" : " sw-btn--ghost")
            }>
              {t.cta} <IconArrowRight size={14} />
            </button>
          </div>
        ))}
      </div>

      <div className="privacypage__foot">
        <IconCheck size={14} />
        Your identity is verified once during setup. Protection activates instantly.
      </div>

      <PrivacyFAQ />
    </div>
  );
}

// ============================================================
// Privacy Shield FAQ
// ============================================================
const PRIVACY_FAQ = [
  {
    q: "How does Privacy Shield actually work?",
    a: "When you activate Privacy Shield, your profile is suppressed from all Sweepify search results. Anyone who searches for you by name, phone, or email will see no results — as if you don't exist in our database."
  },
  {
    q: "How do I prove it's me when I sign up?",
    a: "We verify your identity once during setup using your name, email address, and date of birth. This is a one-time process that takes under a minute. We use this information solely to match and suppress your profile — it is never shared or sold."
  },
  {
    q: "What happens when my Shield expires?",
    a: "Your profile automatically becomes searchable again. You'll receive a reminder email 7 days before expiry so you can renew without any gap in protection."
  },
  {
    q: "Can I see who has searched for me?",
    a: "No. Privacy Shield suppresses your results but does not provide information about who searched for you or when."
  },
  {
    q: "What if someone already ran a scan on me before I activated Shield?",
    a: "Existing results already delivered to other users are outside our control. Shield prevents new searches from returning your information from the moment it's activated onward."
  },
  {
    q: "Is my payment secure?",
    a: "Yes. All payments are processed by Stripe and we never store your card details. Token purchases are instant and non-refundable once activated."
  },
  {
    q: "Can I cancel and get a refund?",
    a: "Privacy Shield activates immediately upon purchase and tokens are deducted from your balance instantly. Because the protection is active from the moment of purchase, we do not offer refunds on Shield purchases."
  },
  {
    q: "What if I want to be searchable again before my Shield expires?",
    a: "You can deactivate your Privacy Shield at any time from your account settings. No refund is issued for unused time."
  }
];

function PrivacyFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq">
      <div className="faq__head">
        <span className="faq__eyebrow">FAQ</span>
        <h2 className="faq__title">Common questions about Privacy Shield</h2>
      </div>
      <div className="faq__list">
        {PRIVACY_FAQ.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className={"faq__item" + (isOpen ? " faq__item--open" : "")}>
              <button
                className="faq__q"
                aria-expanded={isOpen}
                onClick={() => setOpen(isOpen ? -1 : i)}
              >
                <span className="faq__q-text">{item.q}</span>
                <span className="faq__chev" aria-hidden>
                  <IconChevronDown size={18} />
                </span>
              </button>
              <div className="faq__a-wrap" role="region" aria-hidden={!isOpen}>
                <div className="faq__a">{item.a}</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ============================================================
// Manage subscription modal
// ============================================================
function ManageSubscriptionModal({ open, onClose }) {
  const [view, setView] = React.useState("menu"); // menu | cancel | done | billing
  React.useEffect(() => { if (open) setView("menu"); }, [open]);
  if (!open) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal--sm subm" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Close"><IconX size={20} /></button>

        {view === "menu" && (
          <div className="subm__body">
            <h2 className="subm__title">Manage subscription</h2>
            <p className="subm__sub">Shield+ · renews Mar 14, 2026 · 100,000 tokens / year</p>
            <div className="subm__list">
              <button className="subm__row" onClick={() => setView("billing")}>
                <span className="subm__ico"><IconChip size={16} /></span>
                <span className="subm__row-body">
                  <span className="subm__row-title">Edit billing info</span>
                  <span className="subm__row-sub">Update your card or billing email</span>
                </span>
                <IconArrowRight size={15} />
              </button>
              <button className="subm__row subm__row--danger" onClick={() => setView("cancel")}>
                <span className="subm__ico subm__ico--danger"><IconX size={16} /></span>
                <span className="subm__row-body">
                  <span className="subm__row-title">Cancel subscription</span>
                  <span className="subm__row-sub">End auto-renewal of your plan</span>
                </span>
                <IconArrowRight size={15} />
              </button>
            </div>
            <button className="sw-btn sw-btn--ghost subm__back" onClick={onClose}>Back</button>
          </div>
        )}

        {view === "billing" && (
          <div className="subm__body subm__body--msg">
            <span className="subm__msg-icon subm__msg-icon--ok"><IconCheck size={24} /></span>
            <h2 className="subm__title">Check your inbox</h2>
            <p className="subm__sub">We've emailed you a secure link to update your billing details. It expires in 30 minutes.</p>
            <div className="subm__actions">
              <button className="sw-btn sw-btn--ghost" onClick={() => setView("menu")}>Back</button>
              <button className="sw-btn" onClick={onClose}>Done</button>
            </div>
          </div>
        )}

        {view === "cancel" && (
          <div className="subm__body subm__body--msg">
            <span className="subm__msg-icon subm__msg-icon--warn"><IconShield size={24} /></span>
            <h2 className="subm__title">Cancel your subscription?</h2>
            <p className="subm__sub">Are you sure you want to cancel? You'll keep Shield+ until Mar 14, 2026, then your profile becomes searchable again.</p>
            <div className="subm__actions">
              <button className="sw-btn sw-btn--ghost" onClick={() => setView("menu")}>No, keep it</button>
              <button className="sw-btn sw-btn--danger" onClick={() => setView("done")}>Yes, cancel</button>
            </div>
          </div>
        )}

        {view === "done" && (
          <div className="subm__body subm__body--msg">
            <span className="subm__msg-icon subm__msg-icon--ok"><IconCheck size={24} /></span>
            <h2 className="subm__title">Subscription cancelled</h2>
            <p className="subm__sub">Your plan won't renew. You'll keep full access until Mar 14, 2026 — no further charges.</p>
            <div className="subm__actions">
              <button className="sw-btn" onClick={onClose}>Done</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// Settings page
// ============================================================
function SettingsPage({ shield, onShieldChange, onBack, onExport, onDelete, onActivateShield, reportCount }) {
  const [confirmDelete, setConfirmDelete] = React.useState(false);
  const [confirmCancel, setConfirmCancel] = React.useState(false);
  const [deleteText, setDeleteText] = React.useState("");
  const [subOpen, setSubOpen] = React.useState(false);

  const handlePause = () => onShieldChange({ ...shield, paused: !shield.paused });
  const handleCancel = () => {
    onShieldChange({ ...shield, active: false, paused: false });
    setConfirmCancel(false);
  };
  const handleDelete = () => {
    if (deleteText.trim().toLowerCase() !== "delete") return;
    onDelete && onDelete();
  };

  return (
    <div className="settings" data-screen-label="07 Settings">
      <button className="linkback" onClick={onBack}>
        <IconArrowLeft size={14} />
        Back to Dashboard
      </button>

      <div className="settings__head">
        <h1 className="settings__title">Settings</h1>
        <p className="settings__sub">Manage your protection, your data, and your account.</p>
      </div>

      {/* ---------- Manage Shield ---------- */}
      <section className={"settings-card" + (shield.active ? "" : " settings-card--unprotected")}>
        <div className="settings-card__head">
          <span className="settings-card__icon settings-card__icon--blue">
            <IconShieldCheck size={20} />
          </span>
          <div className="settings-card__head-body">
            <h2 className="settings-card__title">Privacy Shield</h2>
            <p className="settings-card__sub">
              {shield.active
                ? "Your profile is currently suppressed from search results."
                : "Anyone can currently search and find your information on Sweepify."}
            </p>
          </div>
          <span className={
            "settings-status " +
            (!shield.active
              ? "settings-status--off"
              : shield.paused
                ? "settings-status--paused"
                : "settings-status--on")
          }>
            <span className="settings-status__dot" />
            {!shield.active ? "Not protected" : shield.paused ? "Paused" : "Active"}
          </span>
        </div>

        {shield.active ? (
          <>
            <div className="settings-meta">
              <div className="settings-meta__cell">
                <div className="settings-meta__label">Plan</div>
                <div className="settings-meta__value">{shield.plan}</div>
              </div>
              <div className="settings-meta__cell">
                <div className="settings-meta__label">Renews / expires</div>
                <div className="settings-meta__value">{shield.expires}</div>
              </div>
              <div className="settings-meta__cell">
                <div className="settings-meta__label">Time remaining</div>
                <div className="settings-meta__value">{shield.remaining}</div>
              </div>
              <div className="settings-meta__cell">
                <div className="settings-meta__label">Auto-renew</div>
                <div className="settings-meta__value">
                  <button
                    className={"settings-switch" + (shield.autorenew ? " is-on" : "")}
                    onClick={() => onShieldChange({ ...shield, autorenew: !shield.autorenew })}
                    aria-pressed={shield.autorenew}
                    aria-label="Toggle auto-renew"
                  >
                    <span className="settings-switch__thumb" />
                  </button>
                </div>
              </div>
            </div>

            <div className="settings-actions">
              <button className="sw-btn sw-btn--sm" onClick={() => onShieldChange({ ...shield, plan: "Shield+", expires: "Apr 18, 2027", remaining: "1 year" })}>
                <IconRefresh size={14} />
                Renew Shield+
              </button>
              <button className="sw-btn sw-btn--ghost sw-btn--sm" onClick={handlePause}>
                <IconPause size={14} />
                {shield.paused ? "Resume Shield" : "Pause Shield"}
              </button>
              <button className="sw-btn-text sw-btn-text--danger" onClick={() => setConfirmCancel(true)}>
                Cancel Shield
              </button>
            </div>

            {confirmCancel && (
              <div className="settings-confirm">
                <div className="settings-confirm__body">
                  <strong>Cancel your Privacy Shield?</strong>
                  <p>Your profile will become searchable again immediately. No refund is issued for unused time.</p>
                </div>
                <div className="settings-confirm__actions">
                  <button className="sw-btn sw-btn--ghost sw-btn--sm" onClick={() => setConfirmCancel(false)}>Keep Shield</button>
                  <button className="sw-btn sw-btn--sm sw-btn--danger" onClick={handleCancel}>Cancel anyway</button>
                </div>
              </div>
            )}
          </>
        ) : (
          <div className="settings-empty">
            <div className="settings-empty__body">
              <div className="settings-empty__title">
                <span className="pulse-dot" />
                Your data is not currently protected
              </div>
              <p>Activate Privacy Shield to suppress your name, phone, and email from every Sweepify search — from the moment of activation onward.</p>
            </div>
            <button className="sw-btn" onClick={onActivateShield}>
              Activate Shield <IconArrowRight size={14} />
            </button>
          </div>
        )}
      </section>

      {/* ---------- Export all reports ---------- */}
      <section className="settings-card">
        <div className="settings-card__head">
          <span className="settings-card__icon settings-card__icon--neutral">
            <IconDownload size={20} />
          </span>
          <div className="settings-card__head-body">
            <h2 className="settings-card__title">Export all reports</h2>
            <p className="settings-card__sub">
              Download every search report tied to this account as a single archive. Each report is delivered as a PDF, exactly as it was generated.
            </p>
          </div>
        </div>

        <div className="settings-export">
          <div className="settings-export__meta">
            <span><IconFile size={13} /> {reportCount} reports</span>
            <span className="settings-export__dot">·</span>
            <span><IconLock size={13} /> Includes a password-protected ZIP</span>
          </div>
          <button className="sw-btn sw-btn--sm" onClick={onExport}>
            <IconDownload size={14} />
            Export all reports
          </button>
        </div>
      </section>

      {/* ---------- Manage subscription ---------- */}
      <section className="settings-card">
        <div className="settings-card__head">
          <span className="settings-card__icon settings-card__icon--blue">
            <IconChip size={20} />
          </span>
          <div className="settings-card__head-body">
            <h2 className="settings-card__title">Manage subscription</h2>
            <p className="settings-card__sub">
              Update your billing details or cancel your plan at any time.
            </p>
          </div>
        </div>
        <div className="settings-actions">
          <button className="sw-btn sw-btn--sm" onClick={() => setSubOpen(true)}>
            <IconChip size={14} /> Manage subscription
          </button>
        </div>
      </section>

      <ManageSubscriptionModal open={subOpen} onClose={() => setSubOpen(false)} />

      {/* ---------- Danger zone ---------- */}
      <section className="settings-card settings-card--danger">
        <div className="settings-card__head">
          <span className="settings-card__icon settings-card__icon--danger">
            <IconTrash size={20} />
          </span>
          <div className="settings-card__head-body">
            <h2 className="settings-card__title">Delete account</h2>
            <p className="settings-card__sub">
              Permanently delete your account, all stored reports, and any active Shield. This cannot be undone.
            </p>
          </div>
        </div>

        {!confirmDelete ? (
          <div className="settings-actions">
            <button className="sw-btn-text sw-btn-text--danger" onClick={() => setConfirmDelete(true)}>
              Delete my account
            </button>
          </div>
        ) : (
          <div className="settings-confirm settings-confirm--danger">
            <div className="settings-confirm__body">
              <strong>This will permanently delete your account.</strong>
              <p>All saved reports will be wiped, any active Shield will be cancelled with no refund, and your token balance will be forfeited. Type <code>delete</code> below to confirm.</p>
              <input
                className="sw-input sw-input--field"
                placeholder="Type 'delete' to confirm"
                value={deleteText}
                onChange={(e) => setDeleteText(e.target.value)}
                style={{ marginTop: 10, maxWidth: 280 }}
              />
            </div>
            <div className="settings-confirm__actions">
              <button className="sw-btn sw-btn--ghost sw-btn--sm" onClick={() => { setConfirmDelete(false); setDeleteText(""); }}>Keep account</button>
              <button
                className="sw-btn sw-btn--sm sw-btn--danger"
                disabled={deleteText.trim().toLowerCase() !== "delete"}
                onClick={handleDelete}
              >
                Permanently delete
              </button>
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

// ============================================================
// Notifications page
// ============================================================
const NOTIF_META = {
  report: { Icon: "IconFile",        tint: "var(--sw-blue-faint)",   color: "var(--sw-blue-primary)" },
  shield: { Icon: "IconShieldCheck", tint: "var(--sw-success-tint)", color: "#166534" },
  tokens: { Icon: "IconChip",        tint: "var(--sw-blue-tint)",    color: "var(--sw-blue-primary)" },
  alert:  { Icon: "IconBell",        tint: "var(--sw-warning-tint)", color: "#92400E" }
};

function NotificationsPage({ onBack, notifications, onMarkAllRead, onItem }) {
  const [filter, setFilter] = React.useState("all");
  const filtered = filter === "all" ? notifications : notifications.filter(n => n.type === filter);
  const unreadCount = notifications.filter(n => n.unread).length;
  const counts = {
    all: notifications.length,
    report: notifications.filter(n => n.type === "report").length,
    shield: notifications.filter(n => n.type === "shield").length,
    tokens: notifications.filter(n => n.type === "tokens").length,
    alert: notifications.filter(n => n.type === "alert").length
  };

  return (
    <div className="settings" data-screen-label="08 Notifications">
      <button className="linkback" onClick={onBack}>
        <IconArrowLeft size={14} />
        Back to Dashboard
      </button>

      <div className="settings__head settings__head--row">
        <div>
          <h1 className="settings__title">Notifications</h1>
          <p className="settings__sub">
            {unreadCount > 0 ? `${unreadCount} unread · ` : ""}
            Everything that's happened on your account.
          </p>
        </div>
        {unreadCount > 0 && (
          <button className="sw-btn sw-btn--ghost sw-btn--sm" onClick={onMarkAllRead}>
            <IconCheck size={14} /> Mark all as read
          </button>
        )}
      </div>

      <div className="notif-filters">
        {[["all","All"],["report","Reports"],["shield","Shield"],["tokens","Tokens"],["alert","Alerts"]].map(([id, label]) => (
          <button
            key={id}
            className={"notif-filter" + (filter === id ? " is-active" : "")}
            onClick={() => setFilter(id)}
          >
            {label}
            <span className="notif-filter__count">{counts[id]}</span>
          </button>
        ))}
      </div>

      <div className="notif-list">
        {filtered.length === 0 ? (
          <div className="notif-empty">
            <IconBell size={32} />
            <div className="notif-empty__title">Nothing here yet</div>
            <div className="notif-empty__sub">No notifications matching this filter.</div>
          </div>
        ) : filtered.map(n => {
          const meta = NOTIF_META[n.type] || NOTIF_META.alert;
          const I = window[meta.Icon] || IconBell;
          return (
            <button key={n.id} className={"notif-item" + (n.unread ? " notif-item--unread" : "")} onClick={() => onItem && onItem(n)}>
              <span className="notif-item__icon" style={{ background: meta.tint, color: meta.color }}>
                <I size={16} />
              </span>
              <div className="notif-item__body">
                <div className="notif-item__row">
                  <span className="notif-item__title">{n.title}</span>
                  <span className="notif-item__time">
                    <IconClock size={11} /> {n.time}
                  </span>
                </div>
                <div className="notif-item__sub">{n.body}</div>
                {n.cta && (
                  <span className="notif-item__cta">
                    {n.cta} <IconArrowRight size={11} />
                  </span>
                )}
              </div>
              {n.unread && <span className="notif-item__dot" aria-label="Unread" />}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// Support page
// ============================================================
function SupportPage({ onBack, onContact }) {
  const [openFaq, setOpenFaq] = React.useState(-1);

  return (
    <div className="settings" data-screen-label="09 Support">
      <button className="linkback" onClick={onBack}>
        <IconArrowLeft size={14} />
        Back to Dashboard
      </button>

      <div className="settings__head">
        <h1 className="settings__title">Help & Support</h1>
        <p className="settings__sub">We're here to help. Most questions are answered below — if not, reach out.</p>
      </div>

      <div className="support-channels">
        <div className="support-channel support-channel--primary">
          <span className="support-channel__icon support-channel__icon--blue">
            <IconMsg size={20} />
          </span>
          <div className="support-channel__body">
            <div className="support-channel__title">Live chat</div>
            <div className="support-channel__sub">
              <span className="support-channel__dot" />
              Online now · Avg. reply in 3 minutes
            </div>
          </div>
          <button className="sw-btn sw-btn--sm" onClick={onContact}>Start chat</button>
        </div>

        <div className="support-channel">
          <span className="support-channel__icon support-channel__icon--neutral">
            <IconMail size={20} />
          </span>
          <div className="support-channel__body">
            <div className="support-channel__title">Email support</div>
            <div className="support-channel__sub">
              <a href="mailto:support@sweepify.com" className="support-link">support@sweepify.com</a> · Replies within 24 hours
            </div>
          </div>
          <a className="sw-btn sw-btn--ghost sw-btn--sm" href="mailto:support@sweepify.com">
            Open mail <IconArrowRight size={14} />
          </a>
        </div>

        <div className="support-channel">
          <span className="support-channel__icon support-channel__icon--neutral">
            <IconBook size={20} />
          </span>
          <div className="support-channel__body">
            <div className="support-channel__title">Help center</div>
            <div className="support-channel__sub">Step-by-step guides, billing info, and policy details.</div>
          </div>
          <button className="sw-btn sw-btn--ghost sw-btn--sm">
            Browse <IconArrowRight size={14} />
          </button>
        </div>
      </div>

      <section className="faq" style={{ marginTop: 32, alignSelf: "stretch", maxWidth: "none" }}>
        <div className="faq__head">
          <span className="faq__eyebrow">FAQ</span>
          <h2 className="faq__title">Frequently asked questions</h2>
        </div>
        <div className="faq__list">
          {SUPPORT_FAQ.map((item, i) => {
            const isOpen = openFaq === i;
            return (
              <div key={i} className={"faq__item" + (isOpen ? " faq__item--open" : "")}>
                <button
                  className="faq__q"
                  aria-expanded={isOpen}
                  onClick={() => setOpenFaq(isOpen ? -1 : i)}
                >
                  <span className="faq__q-text">{item.q}</span>
                  <span className="faq__chev" aria-hidden>
                    <IconChevronDown size={18} />
                  </span>
                </button>
                <div className="faq__a-wrap" role="region" aria-hidden={!isOpen}>
                  <div className="faq__a">{item.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <div className="support-foot">
        <IconLifeBuoy size={14} />
        <span>Still stuck? Live chat is the fastest way to reach a human.</span>
      </div>
    </div>
  );
}

// ============================================================
// Face Scan results page
// ============================================================
function tierFor(score) {
  return FACE_TIERS.find(t => score >= t.min && score <= t.max) || FACE_TIERS[FACE_TIERS.length - 1];
}

function FaceResultsPage({ scan, subject, photoUrl, onBack, onUpgrade }) {
  const [filter, setFilter] = React.useState("all");
  const [showDisclaimer, setShowDisclaimer] = React.useState(true);
  const [revealLow, setRevealLow] = React.useState(false);

  const matches = FACE_MATCHES;
  const counts = React.useMemo(() => {
    const c = { all: matches.length };
    FACE_TIERS.forEach(t => {
      c[t.id] = matches.filter(m => m.score >= t.min && m.score <= t.max).length;
    });
    FACE_MATCH_CATEGORIES.forEach(cat => {
      c[cat.id] = matches.filter(m => m.category === cat.id).length;
    });
    return c;
  }, [matches]);

  const filtered = React.useMemo(() => {
    let list = matches;
    if (FACE_TIERS.some(t => t.id === filter)) {
      const t = FACE_TIERS.find(x => x.id === filter);
      list = list.filter(m => m.score >= t.min && m.score <= t.max);
    } else if (FACE_MATCH_CATEGORIES.some(c => c.id === filter)) {
      list = list.filter(m => m.category === filter);
    }
    return list.sort((a, b) => b.score - a.score);
  }, [filter, matches]);

  const certainCount = counts.certain || 0;
  const confidentCount = counts.confident || 0;
  const strongCount = certainCount + confidentCount;
  const subjectLabel = subject || "your photo";

  return (
    <div className="face-results" data-screen-label="10 Face Scan Results">
      <button className="linkback" onClick={onBack}>
        <IconArrowLeft size={14} />
        Back to Dashboard
      </button>

      {/* Summary header */}
      <div className="face-results__head sw-card">
        <div className="face-results__head-left">
          <div className="face-results__subject">
            {photoUrl ? (
              <img src={photoUrl} alt="" className="face-results__subject-img" />
            ) : (
              <span className="face-results__subject-placeholder"><IconImage size={28} /></span>
            )}
          </div>
          <div className="face-results__title-block">
            <div className="face-results__eyebrow">
              <span className="face-results__pulse" />
              Face Scan complete
            </div>
            <h1 className="face-results__title">
              {matches.length} matches found{subject ? ` for ${subject}` : ""}
            </h1>
            <div className="face-results__meta">
              <span><IconCheck size={12} /> Scanned 217 platforms</span>
              <span className="face-results__meta-dot">·</span>
              <span><IconClock size={12} /> Finished in 1m 38s</span>
            </div>
          </div>
        </div>

        <div className="face-results__stats">
          <div className="face-results__stat">
            <div className="face-results__stat-value" style={{ color: FACE_TIERS[0].color }}>{certainCount}</div>
            <div className="face-results__stat-label">Certain</div>
          </div>
          <div className="face-results__stat">
            <div className="face-results__stat-value" style={{ color: FACE_TIERS[1].color }}>{confidentCount}</div>
            <div className="face-results__stat-label">Confident</div>
          </div>
          <div className="face-results__stat">
            <div className="face-results__stat-value">{matches.length - strongCount}</div>
            <div className="face-results__stat-label">Lower</div>
          </div>
        </div>
      </div>

      {/* Important disclaimer */}
      {showDisclaimer && (
        <div className="face-disclaimer">
          <span className="face-disclaimer__icon" aria-hidden>
            <IconShield size={18} />
          </span>
          <div className="face-disclaimer__body">
            <strong>Important.</strong> Many unrelated people look alike. Never rely on a face search alone — information online may be inaccurate and online scammers often use photos of innocent people. Cross-reference multiple sources before forming an opinion.
          </div>
          <button className="face-disclaimer__close" onClick={() => setShowDisclaimer(false)} aria-label="Dismiss">
            <IconX size={16} />
          </button>
        </div>
      )}

      {/* Tier legend */}
      <div className="face-legend">
        {FACE_TIERS.map(t => (
          <div key={t.id} className="face-legend__item">
            <span className="face-legend__score" style={{ background: t.color }}>
              {t.min} to {t.max}
            </span>
            <span className="face-legend__label">{t.label}</span>
          </div>
        ))}
      </div>

      {/* Filters */}
      <div className="face-filters">
        <button
          className={"face-filter" + (filter === "all" ? " is-active" : "")}
          onClick={() => setFilter("all")}
        >
          All <span className="face-filter__count">{counts.all}</span>
        </button>
        {FACE_TIERS.map(t => counts[t.id] > 0 && (
          <button
            key={t.id}
            className={"face-filter face-filter--tier" + (filter === t.id ? " is-active" : "")}
            style={filter === t.id ? { borderColor: t.color, color: t.color } : {}}
            onClick={() => setFilter(t.id)}
          >
            <span className="face-filter__dot" style={{ background: t.color }} />
            {t.label}
            <span className="face-filter__count">{counts[t.id]}</span>
          </button>
        ))}
        <div className="face-filters__divider" />
        {FACE_MATCH_CATEGORIES.map(cat => {
          if (!counts[cat.id]) return null;
          const I = window[cat.Icon] || IconSearch;
          return (
            <button
              key={cat.id}
              className={"face-filter" + (filter === cat.id ? " is-active" : "")}
              onClick={() => setFilter(cat.id)}
            >
              <I size={12} />
              {cat.label}
              <span className="face-filter__count">{counts[cat.id]}</span>
            </button>
          );
        })}
      </div>

      {/* Match grid */}
      <div className="match-grid">
        {filtered.map(m => {
          const tier = tierFor(m.score);
          const isLow = tier.id === "weak";
          const hidden = isLow && !revealLow;
          return (
            <div key={m.id} className={"match-card" + (hidden ? " match-card--hidden" : "")}>
              <div className="match-card__media">
                <img src={PROFILE_IMAGES[m.image]} alt="" />
                {hidden && (
                  <div className="match-card__veil">
                    <IconLock size={20} />
                    <span>Weak match</span>
                  </div>
                )}
                <span className="match-card__score" style={{ background: tier.color }}>
                  {m.score}
                </span>
                {m.multi && (
                  <span className="match-card__multi">{m.multi}× matches</span>
                )}
              </div>
              <div className="match-card__body">
                <div className="match-card__site">
                  <span className="match-card__favicon" style={{ background: tier.color }} aria-hidden />
                  <span className="match-card__site-name">{m.site}</span>
                </div>
                <div className="match-card__tier" style={{ color: tier.color }}>
                  {tier.label}
                </div>
              </div>
            </div>
          );
        })}
        {filtered.length === 0 && (
          <div className="match-empty">
            <IconSearch size={28} />
            <div className="match-empty__title">No matches in this category</div>
            <div className="match-empty__sub">Try a different filter — or click All to see everything.</div>
          </div>
        )}
      </div>

      {/* Reveal weak matches CTA */}
      {!revealLow && counts.weak > 0 && (filter === "all" || filter === "weak") && (
        <div className="face-reveal">
          <span className="face-reveal__icon"><IconLock size={18} /></span>
          <div className="face-reveal__body">
            <strong>{counts.weak} weak matches</strong> are hidden by default. These have lower confidence and are often look-alikes — unlock if you want to see everything we found.
          </div>
          <button className="sw-btn sw-btn--ghost sw-btn--sm" onClick={() => setRevealLow(true)}>
            <IconEye size={14} /> Reveal weak matches
          </button>
        </div>
      )}

      {/* Footer actions */}
      <div className="face-results__foot">
        <button className="sw-btn sw-btn--ghost" onClick={onBack}>
          <IconArrowLeft size={14} /> Back to Dashboard
        </button>
        <button className="sw-btn">
          Export report <IconArrowRight size={14} />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { TopUpPage, PrivacyShieldPage, PrivacyFAQ, SettingsPage, NotificationsPage, SupportPage, FaceResultsPage });