function Page() {
  const capabilities = [
    { tag: "FIRST-PARTY DATA", title: "Build from your own signals", body: "CRM events, purchase history, and site behavior form the seed for every audience, not rented third-party data.", detail: "Native integrations · CDP-friendly · identity-graph enriched." },
    { tag: "LOOKALIKE EXPANSION", title: "Find more like your best", body: "Seed-audience modeling surfaces prospects who look behaviorally similar to your highest-value customers.", detail: "Match rates typically 60–80% on qualified seeds." },
    { tag: "CONTEXTUAL", title: "Where the intent lives", body: "NLP content classification places ads in contextually relevant environments: cookieless, durable, privacy-friendly.", detail: "20,000+ content categories · updated continuously." },
    { tag: "PREDICTIVE", title: "Score by expected value", body: "pLTV scoring drives both targeting and bidding, so you find and pay appropriately for high-value users.", detail: "Built from your first-party events in 3–7 days." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Audience Targeting"
        title="Target precisely."
        italic="Waste less."
        lead="Audience primitives built from first-party signals, lookalike expansion, contextual intelligence, and predictive value scoring: all working from the same identity layer."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See data sources", href:"#data"}}
        signals={[["60–80%","Match rates"],["20K+","Contextual categories"],["pLTV","Value scoring"],["Privacy","First-party native"]]}
        aside={<AudiencePrecision/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="What's in the stack" title="Four targeting" italic="primitives."/>
          <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={[{"eyebrow":"SEE ALSO","title":"Measurement & Attribution","desc":"Pair targeting with attribution to know which audiences actually drive value.","href":"capabilities-measurement-attribution"},{"eyebrow":"SEE ALSO","title":"Creative Optimization","desc":"Match creative to audience segment automatically.","href":"capabilities-creative-optimization"},{"eyebrow":"SEE ALSO","title":"Customer Acquisition","desc":"The solution built on top of these targeting primitives.","href":"solutions-customer-acquisition"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Want to target"
        italic="better, not broader?"
        body="We'll help you map your first-party signals into high-quality audiences and show the expected reach, match rates, and incrementality before you spend."
        primary={{label:"Request an audit", href:"contact"}}
        secondary={{label:"See measurement", href:"capabilities-measurement-attribution"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);