// Payments product page
function PaymentsPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Payments" }]}
        eyebrow="Product · Payments"
        title={<>Cards, crypto, banks, APMs — <span className="gradient-text">orchestrated</span>.</>}
        sub="One layer that connects every payment provider you use. Smart routing, decline recovery, withdrawal queues, compliance-grade reconciliation. Stop paying for failed deposits."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See provider list", href: "#providers" }}
        visual={<PaymentsVisual/>}
      />

      <StatRow items={[
        { v: "+ 23%", l: "Average decline recovery uplift" },
        { v: "60+", l: "Pre-integrated payment providers" },
        { v: "−42%", l: "Withdrawal processing time" },
        { v: "100%", l: "Reconciled to back-office in real time" },
      ]}/>

      <FeatureGrid
        eyebrow="What's inside"
        title="Payments built for the way trading actually works."
        sub="Volatile deposits, fast withdrawals, jurisdictional rules, IB attribution, FX conversion — all handled at the orchestration layer, not by your dev team."
        features={[
          { t: "Smart routing", d: "Send each transaction to the highest-success-rate provider for that country, currency and amount. Re-route on the fly." },
          { t: "Decline recovery", d: "Auto-retry on alternate provider, alternate currency, or alternate method. Recover deposits that would otherwise be lost." },
          { t: "Withdrawal queue", d: "Compliance-aware withdrawal management: limits, cooling periods, profit checks, manual approvals — fully audit-trailed." },
          { t: "Crypto on/off-ramps", d: "Native USDT, BTC, ETH plus stablecoin gateways. Auto-FX into account base currency. KYT screening built in." },
          { t: "Local payment methods", d: "iDEAL, Pix, UPI, Khipu, Boleto, OXXO, FPX, Sofort and 50+ regional methods configured per country." },
          { t: "Card processors", d: "Direct integrations with Worldpay, Checkout, Praxis, Mercuryo, Stripe Connect, MoneyMatrix, Decta, Tabby and many more." },
          { t: "FX & multi-currency", d: "Hold balances in EUR, USD, GBP, JPY, AED, USDT and more. Auto-conversion at deposit, withdrawal, or trade." },
          { t: "Reconciliation engine", d: "Every transaction reconciled to provider statements, broker ledger and trading platform — automatically and continuously." },
          { t: "Reporting & exports", d: "Daily, monthly, custom-range exports. Compliance-grade audit logs for every approval, retry and reroute." },
        ]}
      />

      <SplitFeature
        eyebrow="Smart routing"
        title="Win the deposit, not the negotiation with your PSP."
        sub="The orchestration layer evaluates country, currency, BIN, amount, time-of-day and historical success — and picks the route most likely to convert. Re-routes automatically if the first attempt declines."
        points={[
          "BIN-aware routing for card transactions",
          "Cascading retries across providers",
          "Per-country priority rules you control",
          "Real-time success-rate dashboards by provider",
        ]}
        visual={<ConnectorGridVisual/>}
      />

      <SplitFeature
        eyebrow="Withdrawals"
        title="Approve, deny, queue, escalate — all in one place."
        sub="Compliance and ops teams work the same withdrawal queue. Limits, cooling periods, profit-check rules, and dual-approval flows are configured once and enforced everywhere."
        points={[
          "Per-jurisdiction withdrawal limits and rules",
          "Multi-step approval with assigned roles",
          "AML & KYT alerts surface inline",
          "Audit-grade history for regulators",
        ]}
        visual={<SecurityShieldVisual/>}
        reverse
      />

      <CompareTable
        eyebrow="Why orchestration"
        title="One PSP is a single point of failure."
        sub="Antelope replaces a fragile single-provider setup with a routing layer that's optimized continuously."
        rows={[
          { label: "Approval rate", them: "Whatever your one PSP delivers", us: "Optimized across the entire stack" },
          { label: "Decline retry", them: "Manual or non-existent", us: "Automatic, multi-provider cascade" },
          { label: "New country launch", them: "Sign new contract, integrate, test, go live (months)", us: "Toggle the provider on, days" },
          { label: "Reconciliation", them: "Spreadsheet hell", us: "Continuous, automated, audit-trailed" },
          { label: "Crypto support", them: "Different vendor, different stack", us: "Same surface as cards" },
        ]}
      />

      <FAQ items={[
        { q: "Do you take a cut of payment volume?", a: "No. Antelope is a SaaS layer — your provider contracts are direct with the PSPs. We never insert ourselves into the funds flow." },
        { q: "Can I add a new PSP that's not on your list?", a: "Yes. We have a generic PSP adapter SDK and an integration team that builds new connectors in days, not months." },
        { q: "How does decline recovery work technically?", a: "On a decline, the orchestration layer evaluates alternate providers, methods and (optionally) currencies, and presents the trader with a one-click retry — or auto-retries silently for retriable error codes." },
        { q: "What about fraud and AML?", a: "Built-in BIN/IP/device fingerprinting, velocity checks, and integrations with KYT vendors (Chainalysis, Elliptic, TRM) for crypto. Suspicious activity surfaces in the same queue your compliance team already uses." },
      ]}/>

      <CTASection
        title="Stop losing deposits to a flaky provider."
        sub="See how orchestration lifts approval rates within the first 30 days."
        primary={{ label: "Book a demo" }}
        secondary={{ label: "Talk to sales", href: "pages/contact.html" }}
      />
    </Site>
  );
}

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