// Why Antelope page
function WhyPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Why Antelope" }]}
        eyebrow="Why Antelope"
        title={<>The fastest way to <span className="gradient-text">operate</span> a trading business.</>}
        sub="Trading-grade infrastructure built by operators. One stack, one data layer, one source of truth — instead of seven dashboards and a spreadsheet."
        ctaPrimary={{ label: "Book a demo" }}
        visual={<WhyRadarVisual/>}
      />
      <StatRow items={[
        { v: "60+", l: "Brokers, prop firms and crypto desks" },
        { v: "× 2.4", l: "Average sales-floor productivity uplift" },
        { v: "+ 23%", l: "Decline-recovery uplift on payments" },
        { v: "− 38%", l: "Time-to-FTD after 90 days" },
      ]}/>
      <FeatureGrid
        eyebrow="Why operators pick us"
        title="Built for the way the business actually runs."
        features={[
          { t: "Operator DNA", d: "Built by people who ran trading businesses before they sold software to them." },
          { t: "One data layer", d: "CRM, Client Area, payments, trading and BI share the same event stream." },
          { t: "Configurable, not bespoke", d: "Workflows you change in minutes — not three-month customization projects." },
          { t: "Real time, not nightly batch", d: "Sub-5-second freshness across the whole stack." },
          { t: "Compliance from day one", d: "ESMA, FCA, ASIC, FSCA, MiCA-ready flows pre-shaped." },
          { t: "No vendor lock-in", d: "Open APIs, exports, and a documented data model. Your data is your data." },
          { t: "Multi-license native", d: "Run several brands or entities from one back-office without forking." },
          { t: "World-class onboarding", d: "Most customers are live in 4–8 weeks, not 9 months." },
          { t: "Partnerships, not vendor calls", d: "A real account team, not a ticket queue." },
        ]}
      />
      <CompareTable
        eyebrow="Antelope vs the patchwork"
        title="What you replace when you switch."
        rows={[
          { label: "CRM", them: "Generic SaaS, customized over months", us: "Trading-native, live in days" },
          { label: "Payments", them: "Single PSP + manual reconciliation", us: "Orchestration with smart routing and recovery" },
          { label: "KYC", them: "Vendor portal, disconnected from CRM", us: "Embedded in the same record" },
          { label: "BI", them: "Separate tool, ETL pipelines, lag", us: "Real-time, embedded, drill-down to record" },
          { label: "Mobile app", them: "External vendor, slow change cycles", us: "White-labeled, native, OTA updates" },
        ]}
      />
      <CTASection title="See the operating system in action." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<WhyPage/>);