// Products — interactive showcase: tab list on left, large preview pane on right.
const PRODUCTS = [
  {
    id: "crm",
    num: "01",
    title: "CRM, Ninja & Call Manager",
    blurb: "Route leads by source, language, desk and performance. Track calls, callbacks, agent KPIs, deposits and retention actions — in one screen.",
    bullets: ["Smart routing engine", "Call recording + AI summaries", "Per-desk pipelines & KPIs", "Auto-assignment by source quality"],
    panel: "crm",
  },
  {
    id: "client-area",
    num: "02",
    title: "Client Area",
    blurb: "Registration, documents, account status, payments and products in one branded client portal — connected to every other module.",
    bullets: ["Branded white-label portal", "KYC document workflow", "Multi-account, multi-product", "Subscriptions & products store"],
    panel: "client",
  },
  {
    id: "payments",
    num: "03",
    title: "Payments",
    blurb: "Smart payment pages for cards, crypto and APMs with status visibility, failed-payment recovery and source-to-deposit attribution.",
    bullets: ["Cards · crypto · APMs · banking", "Failed-payment recovery flows", "Source-to-deposit attribution", "PSP cascade routing"],
    panel: "payments",
  },
  {
    id: "kyc",
    num: "04",
    title: "KYC, AML & Suitability",
    blurb: "Configurable onboarding workflows, questionnaires, verification statuses and suitability tests — per entity, per region.",
    bullets: ["Tier-based KYC ladders", "AML watchlist screening", "Suitability questionnaires", "Per-entity onboarding flows"],
    panel: "kyc",
  },
  {
    id: "bi",
    num: "05",
    title: "BI & AI",
    blurb: "Management dashboards, funnel visibility, alerts, call summaries and next-best-action workflows. The view your COO wishes they had.",
    bullets: ["Funnel + cohort dashboards", "AI call summaries", "Anomaly alerts", "Next-best-action engine"],
    panel: "bi",
  },
  {
    id: "ib",
    num: "06",
    title: "IB & Affiliate System",
    blurb: "Partner hierarchy, sub-IB trees, commission rules, partner portal and quality control. CPA, RevShare, hybrid — all native.",
    bullets: ["Partner hierarchy + sub-IB trees", "CPA / RevShare / hybrid deals", "Postbacks + tracking links", "Payout reporting"],
    panel: "ib",
  },
];

function Products() {
  const [active, setActive] = React.useState("crm");
  const p = PRODUCTS.find((x) => x.id === active);

  return (
    <section id="products" className="section-pad" style={{ background: "linear-gradient(180deg, transparent 0%, rgba(122,82,255,0.04) 50%, transparent 100%)" }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Applications</span>
          <h2>Purpose-built for trading-company teams.</h2>
          <p>Each product has a job in the revenue workflow — not generic modules glued together. Click through the apps. Watch how they connect.</p>
        </div>

        <div className="prod-grid">
          <div className="prod-list">
            {PRODUCTS.map((it) => (
              <button
                key={it.id}
                className={`prod-tab ${it.id === active ? "active" : ""}`}
                onClick={() => setActive(it.id)}
                onMouseEnter={() => setActive(it.id)}
              >
                <span className="prod-num mono">{it.num}</span>
                <div>
                  <div className="prod-title">{it.title}</div>
                  <div className="prod-blurb">{it.blurb}</div>
                </div>
                <span className="prod-chev">→</span>
              </button>
            ))}
          </div>

          <div className="prod-preview card">
            <div className="prod-preview-head">
              <div className="prod-preview-eyebrow">
                <span className="dot-purple"/> {p.title}
              </div>
              <div className="prod-preview-pills">
                {p.bullets.map((b) => <span key={b} className="prod-pill">{b}</span>)}
              </div>
            </div>
            <div className="prod-preview-body" key={active}>
              <ProductPanel kind={p.panel}/>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .prod-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
        .prod-list { display: flex; flex-direction: column; gap: 6px; }
        .prod-tab {
          display: grid; grid-template-columns: auto 1fr auto;
          gap: 12px; align-items: start;
          padding: 14px 14px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 12px;
          text-align: left;
          color: var(--text-dim);
          transition: all .15s ease;
        }
        .prod-tab:hover { background: rgba(255,255,255,0.025); color: var(--text); }
        .prod-tab.active {
          background: linear-gradient(180deg, rgba(122,82,255,0.1), rgba(122,82,255,0.02));
          border-color: rgba(122,82,255,0.3);
          color: var(--text);
        }
        .prod-num { font-size: 11px; color: var(--text-mute); padding-top: 3px; letter-spacing: 0.1em; }
        .prod-tab.active .prod-num { color: var(--purple-2); }
        .prod-title { font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; }
        .prod-blurb { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; display: none; }
        .prod-tab.active .prod-blurb { display: block; }
        .prod-chev { color: var(--text-mute); font-size: 14px; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
        .prod-tab.active .prod-chev { opacity: 1; color: var(--purple-2); transform: translateX(2px); }

        .prod-preview {
          padding: 24px;
          min-height: 540px;
          position: relative;
          overflow: hidden;
        }
        .prod-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
        .prod-preview-eyebrow {
          font-size: 13px; font-weight: 600; color: var(--text);
          display: inline-flex; align-items: center; gap: 8px;
        }
        .dot-purple { width: 7px; height: 7px; border-radius: 999px; background: var(--purple-2); box-shadow: 0 0 10px var(--purple-2); }
        .prod-preview-pills { display: flex; flex-wrap: wrap; gap: 6px; max-width: 60%; justify-content: flex-end; }
        .prod-pill { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--text-dim); }
        .prod-preview-body { animation: fade-in .35s ease both; }
        @keyframes fade-in { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

        @media (max-width: 1024px) {
          .prod-grid { grid-template-columns: 1fr; }
          .prod-preview-pills { max-width: none; justify-content: flex-start; }
        }
      `}</style>
    </section>
  );
}

function ProductPanel({ kind }) {
  if (kind === "crm") return <CRMPanel/>;
  if (kind === "client") return <ClientPanel/>;
  if (kind === "payments") return <PaymentsPanel/>;
  if (kind === "kyc") return <KYCPanel/>;
  if (kind === "bi") return <BIPanel/>;
  if (kind === "ib") return <IBPanel/>;
  return null;
}

function FrameRow({ children }) {
  return <div style={{ display: "flex", gap: 12, alignItems: "stretch", flexWrap: "wrap" }}>{children}</div>;
}

function CRMPanel() {
  const leads = [
    { name: "Sofia M.", country: "ES", source: "aff_42", status: "Hot", stage: "FTD due", color: "#FF7A45" },
    { name: "Daniel K.", country: "DE", source: "google", status: "Warm", stage: "Callback 14:00", color: "#FFB000" },
    { name: "Hiroshi T.", country: "JP", source: "tiktok", status: "New", stage: "Awaiting KYC", color: "#7A52FF" },
    { name: "Marco P.", country: "IT", source: "aff_18", status: "Active", stage: "Retention", color: "#2BD974" },
  ];
  return (
    <div className="cc-panel" style={{ padding: 16 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>Sales Desk · EN Conversion</div>
        <div style={{ display: "flex", gap: 6 }}>
          <span className="prod-pill" style={{ color: "var(--text)" }}>Live · 4 agents</span>
          <span className="prod-pill mono">412 calls today</span>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {leads.map((l) => (
            <div key={l.name} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 12, alignItems: "center", padding: "10px 12px", background: "rgba(255,255,255,0.025)", border: "1px solid var(--line)", borderRadius: 10 }}>
              <span style={{ width: 28, height: 28, borderRadius: 999, background: l.color + "33", color: l.color, fontWeight: 700, display: "grid", placeItems: "center", fontSize: 11 }}>{l.name.charAt(0)}</span>
              <div>
                <div style={{ fontSize: 13, color: "var(--text)", fontWeight: 500 }}>{l.name} <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)", marginLeft: 4 }}>{l.country}</span></div>
                <div style={{ fontSize: 11, color: "var(--text-mute)" }}>{l.source} · {l.stage}</div>
              </div>
              <span className="prod-pill mono" style={{ color: l.color, borderColor: l.color + "44", background: l.color + "12" }}>{l.status}</span>
              <button className="btn-ghost btn" style={{ padding: "6px 10px", fontSize: 11 }}>Call</button>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="cc-panel" style={{ padding: 12 }}>
            <div style={{ fontSize: 11.5, color: "var(--text-mute)", marginBottom: 4 }}>Ninja routing</div>
            <div style={{ fontSize: 13, color: "var(--text)", fontWeight: 500 }}>aff_42 / ES → Maya R.</div>
            <div style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 4 }}>Reason: 4.2% FTD rate, ES native</div>
          </div>
          <div className="cc-panel" style={{ padding: 12 }}>
            <div style={{ fontSize: 11.5, color: "var(--text-mute)", marginBottom: 6 }}>AI Call Summary</div>
            <div style={{ fontSize: 12, color: "var(--text)", lineHeight: 1.5 }}>Client wants to start with $500 demo, asked about leverage caps. Follow-up at <b>15:00</b> with comparison sheet.</div>
            <div style={{ display: "flex", gap: 5, marginTop: 8, flexWrap: "wrap" }}>
              <span className="prod-pill" style={{ color: "var(--purple-2)", borderColor: "rgba(122,82,255,0.3)" }}>Deposit intent</span>
              <span className="prod-pill" style={{ color: "var(--gold)", borderColor: "rgba(255,176,0,0.3)" }}>Callback</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ClientPanel() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 11.5, color: "var(--text-mute)", marginBottom: 4 }}>Welcome back</div>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 16 }}>Sofia Martín</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 18 }}>
          {[
            { l: "Live account", v: "$12,420", c: "#fff" },
            { l: "Pending deposit", v: "$500", c: "#FFB000" },
            { l: "Open positions", v: "4", c: "#fff" },
            { l: "P&L today", v: "+$182", c: "#2BD974" },
          ].map((s) => (
            <div key={s.l} style={{ padding: 12, borderRadius: 8, background: "rgba(255,255,255,0.03)", border: "1px solid var(--line)" }}>
              <div style={{ fontSize: 11, color: "var(--text-mute)" }}>{s.l}</div>
              <div className="mono" style={{ fontSize: 17, fontWeight: 600, color: s.c, marginTop: 2 }}>{s.v}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}>Deposit</button>
          <button className="btn btn-ghost" style={{ flex: 1, justifyContent: "center" }}>Open Web Trader</button>
        </div>
      </div>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Onboarding checklist</div>
        {[
          { l: "Email verified", done: true },
          { l: "Phone verified", done: true },
          { l: "ID document approved", done: true },
          { l: "Proof of address", done: false, status: "Reviewing · 2h" },
          { l: "Suitability questionnaire", done: false, status: "Pending" },
        ].map((s) => (
          <div key={s.l} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
            <span style={{
              width: 18, height: 18, borderRadius: 999,
              background: s.done ? "var(--green)" : "rgba(255,255,255,0.06)",
              border: s.done ? "0" : "1px solid var(--line-2)",
              display: "grid", placeItems: "center", color: "#0B0B18", fontSize: 11, fontWeight: 700
            }}>{s.done ? "✓" : ""}</span>
            <div style={{ flex: 1, fontSize: 12.5, color: s.done ? "var(--text-dim)" : "var(--text)" }}>{s.l}</div>
            <span className="mono" style={{ fontSize: 10.5, color: s.done ? "var(--text-mute)" : "var(--gold)" }}>{s.done ? "Done" : s.status}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function PaymentsPanel() {
  const methods = [
    { name: "Visa / Mastercard", success: 94, vol: "$148K", color: "#7A52FF" },
    { name: "USDT (TRC-20)", success: 99, vol: "$62K", color: "#2BD974" },
    { name: "PIX (Brazil)", success: 88, vol: "$24K", color: "#FFB000" },
    { name: "SEPA Bank", success: 91, vol: "$14K", color: "#24A1DE" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Deposit success rate</div>
          <span className="prod-pill mono">24h</span>
        </div>
        {methods.map((m) => (
          <div key={m.name} style={{ marginBottom: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
              <span style={{ fontSize: 12, color: "var(--text)" }}>{m.name}</span>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--text-dim)" }}>{m.success}% · {m.vol}</span>
            </div>
            <div style={{ height: 6, borderRadius: 999, background: "rgba(255,255,255,0.06)" }}>
              <div style={{ height: "100%", width: `${m.success}%`, background: m.color, borderRadius: 999 }}/>
            </div>
          </div>
        ))}
      </div>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Recovery flow</div>
        {[
          { time: "12:14", text: "Card declined · BR · $250", color: "#FF7A45", action: "Retry on cascade PSP" },
          { time: "12:14", text: "Retried via Stripe-BR", color: "#FFB000", action: "Pending 3DS" },
          { time: "12:15", text: "Approved · funds posted", color: "#2BD974", action: "CRM notified" },
        ].map((e, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, alignItems: "flex-start", padding: "10px 0", borderBottom: i < 2 ? "1px solid var(--line)" : "0" }}>
            <span className="mono" style={{ fontSize: 10.5, color: "var(--text-mute)", paddingTop: 2 }}>{e.time}</span>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--text)" }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: e.color }}/>
                {e.text}
              </div>
              <div style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}>→ {e.action}</div>
            </div>
          </div>
        ))}
        <div style={{ marginTop: 12, padding: 10, borderRadius: 8, background: "rgba(43,217,116,0.08)", border: "1px solid rgba(43,217,116,0.2)", fontSize: 12, color: "var(--green)", fontWeight: 500 }}>
          18% of failed deposits recovered last 24h · $4,820
        </div>
      </div>
    </div>
  );
}

function KYCPanel() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>KYC ladder · Multi-tier</div>
        {[
          { tier: "Tier 0", limit: "$500 cap", color: "#9D80FF", status: "Email verified" },
          { tier: "Tier 1", limit: "$5K cap", color: "#7A52FF", status: "ID verified" },
          { tier: "Tier 2", limit: "Unlimited", color: "#F118B2", status: "PoA + suitability" },
        ].map((t) => (
          <div key={t.tier} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 0", borderBottom: "1px solid var(--line)" }}>
            <span style={{ width: 36, height: 36, borderRadius: 8, background: t.color + "22", border: "1px solid " + t.color + "44", color: t.color, display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11 }}>{t.tier.split(" ")[1]}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, color: "var(--text)", fontWeight: 500 }}>{t.tier} · {t.limit}</div>
              <div style={{ fontSize: 11, color: "var(--text-mute)" }}>{t.status}</div>
            </div>
            <span className="prod-pill mono">configurable</span>
          </div>
        ))}
      </div>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>Document review queue</div>
        {[
          { type: "ID · IT", n: 12, color: "#7A52FF" },
          { type: "PoA · NG", n: 8, color: "#F118B2" },
          { type: "Selfie · MX", n: 4, color: "#FF7A45" },
          { type: "Source of Funds", n: 2, color: "#FFB000" },
        ].map((q) => (
          <div key={q.type} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 26, height: 32, borderRadius: 4, border: "1px solid " + q.color + "55", background: q.color + "15", display: "grid", placeItems: "center", color: q.color, fontSize: 10, fontWeight: 700 }}>DOC</span>
              <span style={{ fontSize: 12.5, color: "var(--text)" }}>{q.type}</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span className="mono" style={{ fontSize: 12, color: "var(--text-dim)" }}>{q.n} pending</span>
              <button className="btn-ghost btn" style={{ padding: "5px 10px", fontSize: 11 }}>Review</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BIPanel() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 14 }}>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Funnel · Last 7d</div>
          <span className="prod-pill mono">CTR · CR · FTD%</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { stage: "Visits", n: 124800, w: 100, c: "#7A52FF" },
            { stage: "Sign-ups", n: 12400, w: 78, c: "#9D80FF" },
            { stage: "KYC complete", n: 4280, w: 52, c: "#F118B2" },
            { stage: "FTD", n: 1680, w: 32, c: "#FF7A45" },
            { stage: "Active 7d", n: 920, w: 18, c: "#FFB000" },
          ].map((s) => (
            <div key={s.stage}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                <span style={{ fontSize: 12, color: "var(--text-dim)" }}>{s.stage}</span>
                <span className="mono" style={{ fontSize: 12, color: "var(--text)" }}>{s.n.toLocaleString()}</span>
              </div>
              <div style={{ height: 28, borderRadius: 6, background: "rgba(255,255,255,0.04)" }}>
                <div style={{ height: "100%", width: s.w + "%", background: `linear-gradient(90deg, ${s.c}, ${s.c}88)`, borderRadius: 6 }}/>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>AI insights</div>
        {[
          { t: "Drop-off detected", d: "KYC step 3 · NG segment", c: "#FF7A45", a: "Add doc-upload helper" },
          { t: "Best converting source", d: "aff_42 · ES · 4.2% FTD", c: "#2BD974", a: "Increase budget +20%" },
          { t: "Retention risk", d: "32 HVCs idle 7d+", c: "#F118B2", a: "Trigger callback batch" },
        ].map((i) => (
          <div key={i.t} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 10, padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
            <span style={{ width: 6, borderRadius: 6, background: i.c, alignSelf: "stretch", boxShadow: `0 0 10px ${i.c}88` }}/>
            <div>
              <div style={{ fontSize: 12.5, color: "var(--text)", fontWeight: 500 }}>{i.t}</div>
              <div style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}>{i.d}</div>
              <div style={{ fontSize: 11, color: i.c, marginTop: 4 }}>→ {i.a}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function IBPanel() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 14 }}>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>Partner hierarchy</div>
        <div style={{ position: "relative", paddingLeft: 8 }}>
          {[
            { name: "Master IB · MENA", pad: 0, sub: "12 sub-IBs · $48K MTD" },
            { name: "Sub-IB Cairo", pad: 24, sub: "RevShare 35% · 142 clients" },
            { name: "Sub-IB Dubai", pad: 24, sub: "Hybrid CPA $200 + 20% · 89" },
            { name: "Sub-Sub Doha", pad: 48, sub: "CPA $150 · 24 clients" },
            { name: "Master IB · LATAM", pad: 0, sub: "8 sub-IBs · $31K MTD" },
            { name: "Sub-IB Mexico", pad: 24, sub: "RevShare 40% · 96 clients" },
          ].map((n, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", paddingLeft: n.pad, position: "relative" }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: n.pad === 0 ? "var(--purple-2)" : n.pad === 24 ? "var(--pink)" : "var(--orange)" }}/>
              <div>
                <div style={{ fontSize: 12.5, color: "var(--text)", fontWeight: n.pad === 0 ? 600 : 500 }}>{n.name}</div>
                <div style={{ fontSize: 11, color: "var(--text-mute)" }}>{n.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="cc-panel" style={{ padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>Commission models</div>
        {[
          { m: "CPA", desc: "Per qualified FTD", v: "$150 — $400" },
          { m: "RevShare", desc: "% of net revenue", v: "20% — 50%" },
          { m: "Hybrid", desc: "CPA + RevShare", v: "$200 + 20%" },
        ].map((c) => (
          <div key={c.m} style={{ padding: 12, marginBottom: 8, borderRadius: 10, background: "rgba(255,255,255,0.025)", border: "1px solid var(--line)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text)" }}>{c.m}</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--purple-2)" }}>{c.v}</span>
            </div>
            <div style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 2 }}>{c.desc}</div>
          </div>
        ))}
        <div style={{ marginTop: 12, padding: 12, borderRadius: 10, background: "rgba(241,24,178,0.08)", border: "1px solid rgba(241,24,178,0.2)" }}>
          <div style={{ fontSize: 11.5, color: "var(--pink)", fontWeight: 600, marginBottom: 4 }}>Quality control</div>
          <div style={{ fontSize: 11.5, color: "var(--text-dim)" }}>Auto-flag low-quality affiliates by FTD/lead ratio + bonus abuse signals.</div>
        </div>
      </div>
    </div>
  );
}

window.Products = Products;