// Integrations page
function IntegrationsPage() {
  const cats = [
    { t: "Trading platforms", items: ["MetaTrader 4", "MetaTrader 5", "cTrader", "DXTrade", "Match-Trader", "Match-Trader Prop", "TradeLocker", "NinjaTrader"] },
    { t: "Liquidity & bridges", items: ["oneZero", "PrimeXM", "Centroid", "Match-Trader Bridge", "Brokeree", "T4B", "PXM XCore"] },
    { t: "Payment processors", items: ["Worldpay", "Checkout.com", "Stripe", "Praxis Cashier", "MoneyMatrix", "Decta", "Tabby", "Mercuryo", "BitGo Payments", "Triple-A", "B2BinPay", "Wallester"] },
    { t: "KYC & AML", items: ["Sumsub", "Onfido", "Veriff", "Jumio", "ComplyCube", "IDnow", "ShuftiPro", "ComplyAdvantage"] },
    { t: "KYT (crypto)", items: ["Chainalysis", "Elliptic", "TRM Labs", "Crystal", "Scorechain"] },
    { t: "Custody", items: ["Fireblocks", "BitGo", "Copper", "Ceffu", "Anchorage"] },
    { t: "Telephony / dialers", items: ["Twilio", "Voiso", "MMD", "Squaretalk", "Commpeak", "Cloudtalk", "Didlogic", "Coperato"] },
    { t: "Communications", items: ["SendGrid", "Mailgun", "Postmark", "WhatsApp Business", "Telegram Bot API", "Discord", "Intercom", "Zendesk"] },
    { t: "Data warehouses", items: ["Snowflake", "BigQuery", "Redshift", "PostgreSQL", "Databricks"] },
    { t: "Analytics", items: ["Google Analytics", "Mixpanel", "Amplitude", "Segment", "Tealium"] },
    { t: "Affiliate networks", items: ["TUNE", "Cellxpert", "Trackier", "Voluum", "PostAffiliate Pro"] },
    { t: "Identity / SSO", items: ["Okta", "Azure AD", "Google Workspace", "Auth0", "OneLogin"] },
  ];
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Integrations" }]}
        eyebrow="Integrations"
        title={<>200+ integrations. <span className="gradient-text">Live, not theoretical</span>.</>}
        sub="Antelope speaks every dialect of trading ops out of the box. If you don't see something here, we'll build the connector — usually in days."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "Request a connector", href: "pages/contact.html" }}
      />
      <section className="section-pad">
        <div className="container">
          <div style={{ display: "grid", gap: 24 }}>
            {cats.map((c) => (
              <div key={c.t} className="card" style={{ padding: 24 }}>
                <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 24, alignItems: "center" }}>
                  <div>
                    <div style={{ fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 4 }}>Category</div>
                    <h3 style={{ fontSize: 17 }}>{c.t}</h3>
                  </div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {c.items.map((i) => (
                      <span key={i} style={{ padding: "7px 12px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 999, fontSize: 12.5, color: "var(--text)", fontWeight: 500 }}>{i}</span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTASection title="Don't see your tool? We'll build the connector." primary={{ label: "Request a connector", href: "pages/contact.html" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<IntegrationsPage/>);