function Page() {
  const capabilities = [
    { tag: "PRE-BID IVT", title: "Stop fraud before it bills", body: "Pre-bid filtering blocks invalid traffic before a bid is placed: the impression never serves, the budget never moves.", detail: "<0.5% IVT rate on filtered inventory." },
    { tag: "BEHAVIORAL ML", title: "Catch what rules miss", body: "ML models trained on billions of events spot new bot patterns, click farms, and sophisticated invalid traffic.", detail: "Models retrained weekly · anomaly alerts in real time." },
    { tag: "DEVICE GRAPH", title: "Know the real device", body: "Cross-device identity graph catches device-spoofing, emulators, and coordinated fraud rings.", detail: "Deterministic + probabilistic identity layers." },
    { tag: "TRANSPARENT LOGS", title: "See every block", body: "Full audit log of blocked impressions, reasons, and source, not a 'trust us' black box.", detail: "Exportable block logs for advertiser review." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Fraud Prevention"
        title="Stop fraud."
        italic="Before it bills."
        lead="Four-layer fraud stack: pre-bid filtering, behavioral ML, device graph, and transparent logs: all applied before spend moves, not after."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the stack", href:"#stack"}}
        signals={[["<0.5%","IVT rate filtered"],["Pre-bid","Not post-impression"],["ML","Behavioral detection"],["Transparent","Block logs"]]}
        aside={<FraudShield/>}
        basePath="./"
      />

      <section className="section" id="stack">
        <div className="container">
          <SectionHeader eyebrow="The fraud stack" title="Four layers" italic="before impression."/>
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>


      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Related" title="Also worth" italic="a look."/>
          <RelatedLinks items={[{"title":"Brand Safety","desc":"Sister layer to fraud: content context, not just traffic.","href":"capabilities-brand-safety"},{"title":"Programmatic","desc":"Pre-bid filtering applied at the auction layer.","href":"capabilities-programmatic"},{"title":"ROI Improvement","desc":"Fraud reduction is one of the four ROI levers.","href":"solutions-roi-improvement"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Want to see"
        italic="what you're actually paying for?"
        body="Send us a 30-day window of served impressions. We'll run a fraud analysis and return a block log with the specific sources, patterns, and reclaimable spend."
        primary={{label:"Request an audit", href:"contact"}}
        secondary={{label:"See brand safety", href:"capabilities-brand-safety"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);