// CRM & Sales Ninja product page
function CRMPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product", href: "index.html" }, { label: "CRM & Sales Ninja" }]}
        eyebrow="Product · CRM & Sales Ninja"
        title={<>The CRM your <span className="gradient-text">retention floor</span> actually wants to live in.</>}
        sub="Built for trading operations, not generic sales. Every contact, call, deposit attempt and trading event lives in one timeline — with auto-routing, performance dashboards and a Sales Ninja layer that turns reps into closers."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See live tour", href: "#tour" }}
        visual={<CRMPipelineVisual/>}
      />

      <StatRow items={[
        { v: "× 2.4", l: "Average rep productivity vs generic CRMs" },
        { v: "−38%", l: "Lead-to-FTD time after 90 days" },
        { v: "150+", l: "Trading-specific events tracked per lead" },
        { v: "24/7", l: "Auto-routing across teams & timezones" },
      ]}/>

      <FeatureGrid
        eyebrow="What you get"
        title="A CRM that speaks broker."
        sub="Stop forcing trading workflows into a generic sales tool. CRM & Sales Ninja was designed from day one for the FTD-driven, KYC-gated, retention-heavy reality of trading."
        features={[
          { t: "Unified lead timeline", d: "Calls, emails, deposits, trades, IB sources and KYC steps unified per contact — no more switching tabs to understand a lead." },
          { t: "Smart auto-routing", d: "Round-robin by language, geo, deposit size, source or rep performance. Reassign sleeping leads automatically." },
          { t: "Sales Ninja scripts", d: "Inline call scripts, objection libraries and live talking points pulled from the lead's actual trading behavior." },
          { t: "Custom statuses & SLAs", d: "Build your retention waterfall with your own statuses, SLAs, escalations and required actions before close." },
          { t: "Power dialer", d: "Click-to-call across providers — Twilio, Voiso, MMD, Squaretalk, Commpeak, Cloudtalk and more — with full call recording in-CRM." },
          { t: "Performance dashboards", d: "Per-rep, per-team, per-desk leaderboards. Conversion, FTD value, retention curves and call SLAs in real time." },
          { t: "Lead distribution rules", d: "Marketing source, ad ID, language, country, capital — combine any signals. Recapture stale leads with auto-redistribution." },
          { t: "Communication hub", d: "Email, SMS, WhatsApp, Telegram all logged in the timeline. Templates with merge tags pull from the trader's live data." },
          { t: "Permissions to the field", d: "Manager sees the desk. Team lead sees the team. Rep sees their book. Compliance sees everything. Field-level masking built in." },
        ]}
      />

      <SplitFeature
        eyebrow="Sales Ninja"
        title="Coach reps in the moment, not after the call."
        sub="Sales Ninja layers live talking points, objection handlers and trading-data context on top of the call screen — so juniors close like seniors and seniors close faster."
        points={[
          "Live trading context: open positions, last deposit, drawdown, IB source",
          "Objection library tied to the trader's real behavior",
          "Auto-summary and next-best-action after every call",
          "QA scoring built into the dialer for compliance teams",
        ]}
        visual={<BIDashboardAdvancedVisual/>}
      />

      <SplitFeature
        eyebrow="Auto-routing"
        title="Leads land where they convert best."
        sub="Configure routing the way your sales floor actually works: by language, country, source, deposit potential, rep skill score, time-of-day, or any custom field."
        points={[
          "Round-robin, weighted, skill-based, or VIP routing",
          "Sleep-and-recapture for cold leads",
          "Auto-reassignment when reps go offline or miss SLA",
          "Source-aware: paid traffic ≠ organic ≠ IB",
        ]}
        visual={<ConnectorGridVisual/>}
        reverse
      />

      <CompareTable
        eyebrow="Why not a generic CRM"
        title="The difference is in the verbs."
        sub="Salesforce and HubSpot were built for B2B SaaS. Antelope's CRM was built for trading."
        rows={[
          { label: "Trading data on the lead card", them: "Custom fields, manual sync", us: "Native: positions, deposits, drawdown, FTD, last trade" },
          { label: "Power dialer", them: "Plug-in or third party", us: "Built-in across 9+ telephony providers" },
          { label: "KYC & payments awareness", them: "External, disconnected", us: "Lives inside the same record" },
          { label: "IB attribution", them: "Manual fields", us: "Multi-level partner tree native" },
          { label: "Time-to-deploy", them: "Months of customization", us: "Days — trading workflows preset" },
        ]}
      />

      <FAQ items={[
        { q: "Can I migrate from Salesforce, HubSpot or another CRM?", a: "Yes. Our migration team has moved 40+ brokers from Salesforce, HubSpot, Zoho, Pipedrive and bespoke MySQL stacks. Lead history, call logs, custom fields and tags come over cleanly." },
        { q: "Which dialers are supported out of the box?", a: "Twilio, Voiso, MMD, Commpeak, Squaretalk, Cloudtalk, Didlogic, Coperato and any SIP-trunk-compatible provider. Recording, click-to-call and dispositions land in the lead timeline." },
        { q: "How do permissions work for multi-desk operations?", a: "Roles + teams + record ownership. Field-level masking lets a junior see contact info but not deposit history, for example. Built for ESMA, CySEC, ASIC and FCA structures." },
        { q: "Can I use the CRM without your trading platform?", a: "Yes. CRM works standalone or with MT4/5, cTrader, DXTrade, your in-house platform, or no platform at all (call-center mode)." },
      ]}/>

      <CTASection
        title="Run your sales floor like an operator."
        sub="See how CRM & Sales Ninja replace 4–6 tools and lift conversion within the first 90 days."
        primary={{ label: "Book a demo" }}
        secondary={{ label: "View pricing", href: "pages/pricing.html" }}
      />
    </Site>
  );
}

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