// FX / CFD Brokers — flagship solution page with deep, unique design
function FxCfdPage() {
  const [tab, setTab] = React.useState("retention");

  const tabs = {
    retention: {
      title: "Retention floor",
      desc: "Sales Ninja, dialer, smart leads queue, performance dashboards.",
      bullets: [
        "Inbound + outbound dialer routed by score, geo, language",
        "Auto-rotation, callback engine, voicemail drop",
        "Coaching mode + whisper, call recording, transcripts",
        "Daily / weekly KPI dashboards by desk and rep",
      ],
    },
    trading: {
      title: "Trading desk",
      desc: "MT4/5, cTrader, DXTrade, MatchTrader — connected to ops in real-time.",
      bullets: [
        "Single login per client across all platforms",
        "Real-time positions, exposure and PnL in CRM",
        "Risk rules, hedge, A/B-book, internal liquidity",
        "Audit-grade trade logs, replay any client journey",
      ],
    },
    payments: {
      title: "Payments orchestration",
      desc: "Smart routing across cards, banks, crypto, APMs — auto-recovery for declines.",
      bullets: [
        "200+ pre-integrated PSPs and crypto rails",
        "Cascading retries, geo-aware routing, FX hedge",
        "Approval rates dashboards, decline-reason analytics",
        "Crypto withdrawals in minutes, KYT-clean",
      ],
    },
    compliance: {
      title: "Compliance & KYC",
      desc: "ESMA, FCA, ASIC, FSCA, FSC-Mauritius — flows pre-shaped for each license.",
      bullets: [
        "MiFID II appropriateness, suitability, risk profiling",
        "Sumsub, Onfido, Veriff, Jumio — switch with one toggle",
        "PEP, sanctions, adverse media, ongoing monitoring",
        "Regulator-ready audit exports in one click",
      ],
    },
  };

  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Solutions" }, { label: "FX / CFD Brokers" }]}
        eyebrow="Solution · FX / CFD Brokers"
        title={<>The operating system for <span className="gradient-text">FX & CFD brokers</span>.</>}
        sub="From license-day-one to global scale — CRM, Client Area, payments, KYC, trading and BI on one stack. Built by people who've operated brokers, not just sold to them."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "Jump to platform tour", href: "#tour" }}
        visual={<FXBridgeVisual/>}
      />

      <StatRow items={[
        { v: "60+", l: "FX/CFD brokers running on Antelope" },
        { v: "$8.4B", l: "Monthly trading volume across our customers" },
        { v: "+24%", l: "Average FTD lift after migration" },
        { v: "12 ms", l: "Median LP routing latency" },
      ]}/>

      {/* Pain narrative */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">The problem with patchwork</span>
            <h2>You didn't sign up to be a systems integrator.</h2>
            <p>Most brokers run on a stitched-together mess: a CRM here, a Client Area there, a payments orchestrator someone bolted on in 2019, KYC running on emails, BI built in Google Sheets. Every department has a different version of the truth. Every regulator visit is a panic.</p>
          </div>
          <div className="fx-pain-grid">
            {[
              { q: "Sales", p: "Reps work in the CRM. They can't see if the client funded, if KYC passed, if the trade went through.", c: "#FF7A45" },
              { q: "Ops", p: "Approves withdrawals from a different tool. Logs in five places. Keeps a spreadsheet for everything.", c: "#FFB000" },
              { q: "Compliance", p: "Receives Excel exports once a week. Audits are reactive. Regulator asks, ops scrambles.", c: "#F118B2" },
              { q: "Risk", p: "Sees positions hours late. A/B-book decisions are gut, not data. No early warning on flagged accounts.", c: "#7A52FF" },
              { q: "Marketing", p: "ROAS is a hand-built spreadsheet. Affiliate fraud goes unnoticed for weeks.", c: "#24A1DE" },
              { q: "CEO", p: "Asks 'how are we doing?' — gets four different answers.", c: "#2BD974" },
            ].map((p) => (
              <div key={p.q} className="fx-pain-card card">
                <div className="fx-pain-tag" style={{ "--c": p.c }}>{p.q}</div>
                <p>{p.p}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .fx-pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
          .fx-pain-card { padding: 22px; }
          .fx-pain-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 12px; }
          .fx-pain-tag {
            font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--c); padding: 4px 10px;
            background: color-mix(in oklab, var(--c) 12%, transparent);
            border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
            border-radius: 999px; display: inline-block;
          }
          @media (max-width: 900px) { .fx-pain-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Interactive tabs — platform tour */}
      <section id="tour" className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Platform tour</span>
            <h2>One stack, four pillars, zero spreadsheets.</h2>
          </div>
          <div className="fx-tour card">
            <div className="fx-tour-tabs">
              {Object.entries(tabs).map(([k, v]) => (
                <button key={k} onClick={() => setTab(k)} className={`fx-tour-tab ${tab === k ? "active" : ""}`}>
                  {v.title}
                </button>
              ))}
            </div>
            <div className="fx-tour-body">
              <div className="fx-tour-text">
                <h3>{tabs[tab].title}</h3>
                <p>{tabs[tab].desc}</p>
                <ul>
                  {tabs[tab].bullets.map((b) => (
                    <li key={b}><span>→</span>{b}</li>
                  ))}
                </ul>
              </div>
              <div className="fx-tour-visual">
                {tab === "retention" && <CallCenterVisual/>}
                {tab === "trading" && <OrderBookVisual/>}
                {tab === "payments" && <PaymentRouter/>}
                {tab === "compliance" && <ComplianceFlow/>}
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .fx-tour { padding: 0; overflow: hidden; }
          .fx-tour-tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
          .fx-tour-tab {
            flex: 1; padding: 18px 22px; min-width: 180px;
            background: transparent; border: 0; border-right: 1px solid var(--line);
            color: var(--text-dim); text-align: left;
            font-size: 14px; font-weight: 600;
            cursor: pointer; transition: all .15s ease;
          }
          .fx-tour-tab:last-child { border-right: 0; }
          .fx-tour-tab:hover { color: var(--text); background: var(--surface-2); }
          .fx-tour-tab.active {
            color: var(--text);
            background: linear-gradient(180deg, color-mix(in oklab, var(--purple-2) 18%, transparent), transparent);
            box-shadow: inset 0 -2px 0 var(--purple-2);
          }
          .fx-tour-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; }
          .fx-tour-text { padding: 36px; border-right: 1px solid var(--line); }
          .fx-tour-text h3 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 12px; }
          .fx-tour-text p { color: var(--text-dim); margin-bottom: 24px; }
          .fx-tour-text ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
          .fx-tour-text li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; }
          .fx-tour-text li span { color: var(--purple-2); font-weight: 700; }
          .fx-tour-visual { padding: 24px; background: var(--ink-2); }
          @media (max-width: 900px) { .fx-tour-body { grid-template-columns: 1fr; } .fx-tour-text { border-right: 0; border-bottom: 1px solid var(--line); } }
        `}</style>
      </section>

      {/* License-day playbook timeline */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Launch playbook</span>
            <h2>From signature to first deposit in 1 week.</h2>
            <p>We've launched dozens of brokers across CySEC, FCA, ASIC, FSCA, FSA-Seychelles, BVI and Mauritius. The runway is shorter than you think.</p>
          </div>
          <div className="fx-timeline">
            {[
              { w: "Week 1", t: "Kickoff & scoping", d: "Stack inventory. Regulatory profile. KYC vendor + payment rails. Brand & domains.", c: "#7A52FF" },
              { w: "Week 2", t: "Tenant + integrations", d: "Tenant provisioned. MT5 / cTrader connected. PSPs + KYC vendors live in sandbox.", c: "#9D80FF" },
              { w: "Week 3-4", t: "Workflows & content", d: "Onboarding flow, suitability, deposit/withdrawal flows, email templates, IB setup.", c: "#F89BD6" },
              { w: "Week 5", t: "UAT + compliance review", d: "End-to-end test. Audit logs verified. Regulatory exports validated.", c: "#F118B2" },
              { w: "Week 6", t: "Go-live", d: "First clients onboarded. First deposits. First trades. First reports.", c: "#FF7A45" },
            ].map((s, i) => (
              <div key={s.w} className="fx-tl-step" style={{ "--c": s.c, animationDelay: `${i * 0.12}s` }}>
                <div className="fx-tl-marker"/>
                <div className="fx-tl-line"/>
                <div className="fx-tl-week">{s.w}</div>
                <div className="fx-tl-title">{s.t}</div>
                <div className="fx-tl-desc">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .fx-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; padding: 20px 0; }
          .fx-tl-step {
            padding: 0 16px 0 0; position: relative;
            animation: fx-fade-in .6s ease both;
          }
          .fx-tl-marker {
            width: 18px; height: 18px; border-radius: 999px;
            background: var(--c); margin-bottom: 14px;
            box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 25%, transparent), 0 0 24px var(--c);
            position: relative; z-index: 2;
          }
          .fx-tl-line {
            position: absolute; left: 9px; right: 0; top: 9px; height: 2px;
            background: linear-gradient(90deg, var(--c), color-mix(in oklab, var(--c) 0%, transparent));
            z-index: 1;
          }
          .fx-tl-step:last-child .fx-tl-line { display: none; }
          .fx-tl-week { font-size: 11px; font-weight: 700; color: var(--c); letter-spacing: 0.06em; text-transform: uppercase; }
          .fx-tl-title { font-size: 16px; font-weight: 700; margin: 6px 0 6px; letter-spacing: -0.01em; }
          .fx-tl-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
          @media (max-width: 900px) {
            .fx-timeline { grid-template-columns: 1fr; gap: 24px; }
            .fx-tl-line { display: none !important; }
          }
        `}</style>
      </section>

      {/* Compare vs build / vs patchwork */}
      <CompareTable
        eyebrow="Antelope vs alternatives"
        title="Why operators pick Antelope over building or stitching."
        them="Build in-house / Stitch SaaS"
        us="Antelope OS"
        rows={[
          { label: "Time to first FTD", them: "many months", us: "1 week, with launch playbook" },
          { label: "MT4/5 + cTrader integration", them: "2 dev teams, custom bridges", us: "Native, day-one" },
          { label: "Payment routing", them: "One PSP per market, manual fallback", us: "200+ PSPs, smart routing, auto-recovery" },
          { label: "Compliance audit prep", them: "Excel exports, hope nothing's missing", us: "One-click regulator-ready exports" },
          { label: "Multi-entity / multi-license", them: "One tenant per brand, no consolidation", us: "Group P&L, shared CRM, isolated books" },
          { label: "Total cost (year 1)", them: "$1.2M–3M build + $40K/mo SaaS", us: "Predictable monthly, fewer vendors" },
        ]}
      />

      {/* Customer voice */}
      <section className="section-pad">
        <div className="container">
          <div className="fx-quote-band">
            <div className="fx-quote-bg"/>
            <div className="fx-quote-content">
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Operator voice</span>
              <blockquote>
                "We migrated off three vendors and a Salesforce instance in 8 weeks.
                Sales Ninja alone paid for the whole platform in the first quarter — our retention desk works one queue
                and our compliance team stopped sending Excel files at midnight."
              </blockquote>
              <div className="fx-quote-author">
                <div className="fx-quote-avatar">MR</div>
                <div>
                  <div style={{ fontWeight: 600 }}>Michael Reeves</div>
                  <div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)" }}>COO · CySEC-regulated FX broker · 40K active accounts</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .fx-quote-band {
            position: relative; padding: 60px 56px; border-radius: 28px;
            background: linear-gradient(135deg, var(--purple) 0%, #2A1080 100%);
            overflow: hidden; border: 1px solid rgba(255,255,255,0.18);
          }
          .fx-quote-bg {
            position: absolute; inset: 0;
            background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            mask: radial-gradient(800px 400px at 50% 50%, #000, transparent 80%);
            -webkit-mask: radial-gradient(800px 400px at 50% 50%, #000, transparent 80%);
          }
          .fx-quote-content { position: relative; z-index: 1; max-width: 800px; }
          .fx-quote-band blockquote {
            margin: 18px 0 32px; padding: 0;
            font-size: clamp(20px, 2.3vw, 28px); line-height: 1.45;
            color: #fff; font-weight: 500; letter-spacing: -0.01em;
          }
          .fx-quote-author { display: flex; gap: 14px; align-items: center; color: #fff; }
          .fx-quote-avatar {
            width: 48px; height: 48px; border-radius: 999px;
            background: linear-gradient(135deg, #F118B2, #FFB000);
            color: #fff; display: grid; place-items: center; font-weight: 700;
          }
        `}</style>
      </section>

      <FeatureGrid
        eyebrow="What's included"
        title="Everything a broker needs from license to scale."
        features={[
          { t: "CRM & Sales Ninja", d: "Lead routing, dialer, performance dashboards, coaching mode." },
          { t: "Client Area", d: "Registration, KYC, deposits, accounts, internal transfers, copy trading." },
          { t: "Payments orchestration", d: "Cards, crypto, banks, APMs with cascading retries and FX hedge." },
          { t: "KYC, AML, suitability", d: "MiFID II, ESMA, FCA, ASIC — vendors abstracted, switchable." },
          { t: "Trading platform", d: "MT4/5, cTrader, DXTrade or our native engine. Single login per client." },
          { t: "BI & AI", d: "Live dashboards across sales, ops, trading and risk. Anomaly alerts." },
          { t: "IB & affiliate", d: "Multi-level partner trees, hybrid commissions, automatic payouts." },
          { t: "Trader apps", d: "Web Trader and native iOS/Android, white-labeled to your brand." },
          { t: "Compliance & audit", d: "Audit-grade logs, exports, regulatory templates per jurisdiction." },
        ]}
      />

      <FAQ items={[
        { q: "We're launching a new license — can you help with setup?", a: "Yes. We've launched dozens of brokers across CySEC, FCA, ASIC, FSCA, FSA-Seychelles, BVI, Mauritius and more. Onboarding includes regulatory templates, payment provider intros, and KYC vendor setup. Average go-live is 1 week." },
        { q: "We're already live on MT5 — can you integrate?", a: "Absolutely. Most of our customers come over with an existing MT5 deployment. We sit on top, not underneath. Migration takes 4–8 weeks with no downtime." },
        { q: "Can we keep our existing PSPs?", a: "Yes. We have 200+ PSPs pre-integrated, and we can add anything bespoke in 1–2 weeks. Your routing rules carry over." },
        { q: "How does this work for multi-license groups?", a: "One tenant, multiple entities. Shared CRM, isolated books, separate compliance flows per license. Group-level BI rolls everything up." },
        { q: "Where does the data live?", a: "EU, UK, US or APAC — your choice. We're SOC 2 Type II and ISO 27001 certified. Customer-managed keys are available on Enterprise." },
        { q: "What about pricing?", a: "Tiered by tenant size and modules. No per-seat games. Most brokers land between $15K–$60K/month all-in. See the pricing page or talk to us." },
      ]}/>

      <CTASection
        title="Operate your broker on one stack."
        sub="Book 30 minutes. We'll walk through the platform with your real workflows."
        primary={{ label: "Book a demo" }}
        secondary={{ label: "See pricing", href: "pages/pricing.html" }}
      />
    </Site>
  );
}

// Inline supporting visuals just for this page

function PaymentRouter() {
  return (
    <div className="card" style={{ padding: 22, height: "100%" }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Smart routing · live</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>APPROVAL 92.4%</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "80px 1fr 80px", gap: 16, alignItems: "center" }}>
        <div className="pr-side">
          <div className="pr-node">Card</div>
          <div className="pr-node">Crypto</div>
          <div className="pr-node">Bank</div>
        </div>
        <svg viewBox="0 0 200 180" preserveAspectRatio="none" style={{ width: "100%", height: 180 }}>
          <defs>
            <linearGradient id="pr-g" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0" stopColor="var(--purple-2)" stopOpacity="0.7"/>
              <stop offset="1" stopColor="var(--pink)" stopOpacity="0.4"/>
            </linearGradient>
          </defs>
          {[30, 90, 150].map((y, i) => (
            <g key={i}>
              <path d={`M 0 ${y} Q 100 90, 200 ${30 + i * 60}`} stroke="url(#pr-g)" fill="none" strokeWidth="1.5"/>
              <circle r="3" fill="var(--green)">
                <animateMotion dur={`${3 + i * 0.4}s`} repeatCount="indefinite" path={`M 0 ${y} Q 100 90, 200 ${30 + i * 60}`}/>
              </circle>
            </g>
          ))}
          <circle cx="100" cy="90" r="22" fill="var(--ink)" stroke="var(--purple-2)" strokeWidth="2"/>
          <text x="100" y="86" textAnchor="middle" fontSize="9" fill="var(--text-dim)" letterSpacing="1">ROUTER</text>
          <text x="100" y="98" textAnchor="middle" fontSize="11" fill="var(--text)" fontWeight="700">200+</text>
        </svg>
        <div className="pr-side">
          <div className="pr-node ok">PSP-A · 94%</div>
          <div className="pr-node warn">PSP-B · 71%</div>
          <div className="pr-node ok">PSP-C · 89%</div>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginTop: 18 }}>
        {[
          { l: "Approval rate", v: "92.4%" },
          { l: "Auto-recovered", v: "$184K MTD" },
          { l: "Avg latency", v: "1.2s" },
        ].map((s) => (
          <div key={s.l} style={{ background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 10, padding: 10, textAlign: "center" }}>
            <div style={{ fontSize: 10, color: "var(--text-mute)", letterSpacing: "0.06em" }}>{s.l.toUpperCase()}</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>
      <style>{`
        .pr-side { display: flex; flex-direction: column; gap: 8px; }
        .pr-node { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; text-align: center; color: var(--text-dim); }
        .pr-node.ok { color: var(--green); border-color: rgba(43,217,116,0.3); }
        .pr-node.warn { color: #FFB000; border-color: rgba(255,176,0,0.3); }
      `}</style>
    </div>
  );
}

function ComplianceFlow() {
  const steps = [
    { n: "1", t: "Sign-up", d: "Email + phone verified", c: "#7A52FF" },
    { n: "2", t: "ID + selfie", d: "Sumsub auto-pass", c: "#9D80FF" },
    { n: "3", t: "Address", d: "PoR uploaded", c: "#F89BD6" },
    { n: "4", t: "Suitability", d: "MiFID II passed", c: "#F118B2" },
    { n: "5", t: "AML screening", d: "PEP/sanctions clean", c: "#FF7A45" },
    { n: "6", t: "Approved", d: "Trading enabled", c: "#2BD974" },
  ];
  return (
    <div className="card" style={{ padding: 22, height: "100%" }}>
      <div className="row between" style={{ marginBottom: 14 }}>
        <span className="tag"><span className="dot"/>Onboarding · ESMA-shaped</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>AVG TIME 4m 12s</span>
      </div>
      <div className="cf-stack">
        {steps.map((s, i) => (
          <div key={s.n} className="cf-step" style={{ "--c": s.c, animationDelay: `${i * 0.12}s` }}>
            <div className="cf-num">{s.n}</div>
            <div>
              <div className="cf-t">{s.t}</div>
              <div className="cf-d">{s.d}</div>
            </div>
            <div className="cf-tick">✓</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, padding: 12, background: "var(--surface-2)", borderRadius: 10, fontSize: 11.5, color: "var(--text-dim)", textAlign: "center" }}>
        <span className="mono" style={{ color: "var(--green)" }}>● 14:02:18</span> · client #4-2918 cleared compliance — auto-eligible to fund
      </div>
      <style>{`
        .cf-stack { display: flex; flex-direction: column; gap: 6px; }
        .cf-step {
          display: grid; grid-template-columns: 28px 1fr 24px;
          gap: 12px; align-items: center;
          padding: 10px 12px; background: var(--surface-2);
          border: 1px solid color-mix(in oklab, var(--c) 25%, var(--line));
          border-radius: 10px;
          animation: fx-fade-in .5s ease both;
        }
        .cf-num { width: 26px; height: 26px; border-radius: 999px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
        .cf-t { font-size: 13px; font-weight: 600; }
        .cf-d { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
        .cf-tick { color: var(--green); font-weight: 700; font-size: 16px; }
      `}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<FxCfdPage/>);