// BI & AI product page
function BIAIPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "BI & AI" }]}
        eyebrow="Product · BI & AI"
        title={<>Dashboards, alerts and <span className="gradient-text">next-best-action</span> — across the whole stack.</>}
        sub="One BI surface for sales, retention, payments, trading and compliance — with AI-driven anomaly detection, churn prediction and per-rep next-best-action coaching."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See dashboards", href: "#dashboards" }}
        visual={<BIDashboardAdvancedVisual/>}
      />

      <StatRow items={[
        { v: "Real-time", l: "Sub-5-second data freshness" },
        { v: "200+", l: "Pre-built KPIs across the stack" },
        { v: "AI", l: "Anomaly + churn + NBA models built in" },
        { v: "Custom", l: "Drag-build your own dashboards" },
      ]}/>

      <FeatureGrid
        eyebrow="Inside BI & AI"
        title="Numbers your team will actually use."
        features={[
          { t: "Sales & retention", d: "Conversion, FTD, retention curves, rep leaderboards, call SLA." },
          { t: "Payments", d: "Approval rates, decline reasons, recovery uplift, per-PSP performance." },
          { t: "Trading", d: "Volume, P&L, exposure, toxicity, symbol performance, group P&L." },
          { t: "Compliance", d: "KYC throughput, sanctions hits, AML alerts, withdrawal queue health." },
          { t: "Marketing", d: "Source ROI, CPL, CPA, by-channel funnel, attribution windows." },
          { t: "Custom dashboards", d: "Drag widgets, build per-team dashboards. Embed in CRM, Client Area or external." },
          { t: "Anomaly detection", d: "AI flags unusual spikes, drops, fraud clusters and broken funnels." },
          { t: "Churn prediction", d: "Per-trader churn risk score with actionable triggers for retention." },
          { t: "Next-best-action", d: "Per-rep AI suggestions: who to call, what to say, what to offer." },
        ]}
      />

      <SplitFeature
        eyebrow="One data layer"
        title="Stop running 6 dashboards from 6 systems."
        sub="Antelope's BI sits on top of the same event stream that powers CRM, payments and trading. No ETL, no nightly batches, no 'why don't these numbers match'."
        points={[
          "Sub-5s data freshness across the stack",
          "Drill from a KPI down to the underlying record",
          "Embed dashboards anywhere with token auth",
          "Per-role scoping and field-level masking",
        ]}
        visual={<BIDashboardVisual/>}
      />

      <FAQ items={[
        { q: "Can I bring my own data warehouse?", a: "Yes — write-out connectors to Snowflake, BigQuery, Redshift and Postgres. Use Antelope BI as the front end or your tools." },
        { q: "How does the AI work?", a: "Models are trained on anonymized aggregate data plus your own historical data. Churn, anomaly and NBA models are continuously evaluated for accuracy." },
        { q: "Is BI included in pricing?", a: "Core BI is included. AI modules and advanced models are optional add-ons." },
      ]}/>

      <CTASection title="One BI surface, every team, real time." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}

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