function Page() {
  const capabilities = [
    { tag: "PRE-BID FILTERING", title: "Block bad inventory upstream", body: "Category, URL, and app-level exclusions applied before bid, not after impression.", detail: "Saves budget + stops the impression ever serving." },
    { tag: "CONTEXTUAL ANALYSIS", title: "Content-aware safety", body: "NLP scans page context in real time, catching brand-unsafe content even on otherwise approved domains.", detail: "Updates continuously as content changes." },
    { tag: "VERIFICATION PARTNERS", title: "Third-party integrations", body: "IAS and DoubleVerify integrated natively for independent verification and shared reporting.", detail: "No extra tags · unified dashboards." },
    { tag: "POST-BID MONITORING", title: "Continuous brand audits", body: "Ongoing monitoring of served impressions with automatic flag-and-block on brand-safety violations.", detail: "Creative and placement-level audit trail." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Brand Safety"
        title="Your brand."
        italic="Next to the right content."
        lead="Four-layer brand-safety stack: pre-bid filtering, contextual analysis, third-party verification, and post-bid monitoring: working continuously on every impression."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the layers", href:"#layers"}}
        signals={[["4 layers","Safety stack"],["Pre-bid","Exclusion"],["Continuous","Monitoring"],["IAS + DV","Integrated"]]}
        aside={<BrandSafetyStack/>}
        basePath="./"
      />

      <section className="section" id="layers">
        <div className="container">
          <SectionHeader eyebrow="The stack" title="Four layers" italic="of protection."/>
          <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":"Programmatic","desc":"Brand-safe inventory at the auction layer.","href":"capabilities-programmatic"},{"title":"Fraud Prevention","desc":"Complementary layer for traffic quality.","href":"capabilities-fraud-prevention"},{"title":"Brand Awareness","desc":"The solution where brand safety matters most.","href":"solutions-brand-awareness"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Want to run"
        italic="with total brand-safety clarity?"
        body="Share your current brand-safety setup and the categories that matter. We'll map how the four-layer stack would apply and what coverage looks like."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See programmatic", href:"capabilities-programmatic"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);