// Financial Call Centers solution page
function CallCentersPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Solutions" }, { label: "Financial Call Centers" }]}
        eyebrow="Solution · Financial Call Centers"
        title={<>The CRM and <span className="gradient-text">dialer stack</span> for sales floors.</>}
        sub="Built for outsourced sales floors and call centers: CRM, dialer, performance dashboards, multi-tenant rep management, and broker hand-off."
        ctaPrimary={{ label: "Book a demo" }}
        visual={<CallCenterVisual/>}
      />
      <FeatureGrid
        eyebrow="Capabilities"
        title="Built for the sales floor."
        features={[
          { t: "Power dialer", d: "Click-to-call, predictive, preview modes across 9+ providers." },
          { t: "Call scripts", d: "Inline scripts, objection handlers, talking points per lead." },
          { t: "QA scoring", d: "Built-in call review with scoring rubrics and feedback." },
          { t: "Multi-tenant", d: "Run multiple broker accounts from one platform with strict data walls." },
          { t: "Performance leaderboards", d: "Per-rep, per-team, per-shift dashboards." },
          { t: "Lead routing", d: "Round-robin, skill-based, language-based, performance-based." },
          { t: "Compliance recording", d: "Full call recording with retention policies and audit logs." },
          { t: "Hand-off to broker", d: "Clean lead hand-off API to broker CRMs (incl. Antelope-on-Antelope)." },
          { t: "Reporting", d: "Time-on-call, talk-ratio, conversion, FTD value per rep." },
        ]}
      />
      <CTASection title="Equip your floor, lift your conversion." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<CallCentersPage/>);