function Page() {
  const capabilities = [
    { tag: "INCREMENTALITY", title: "Measure real lift", body: "Hold-out tests and geo experiments isolate incremental conversions from those you'd have gotten anyway.", detail: "Industry standard: 20–40% of measured conversions are non-incremental." },
    { tag: "VALUE-BASED BIDDING", title: "Bid on expected LTV", body: "Predictive customer-value signals drive bid logic so you pay more for customers worth more.", detail: "pLTV model built from your first-party signals." },
    { tag: "BUDGET ALLOCATION", title: "Shift spend to what works", body: "Automated budget pacing across channels, campaigns, and creatives based on rolling performance.", detail: "Shifts nightly: weekly manual review optional." },
    { tag: "WASTE REDUCTION", title: "Kill the dead weight", body: "Flag and pause underperforming segments, placements, and partners before they drain the budget.", detail: "Configurable thresholds on CPA, ROAS, IVT, and frequency." },
  ];
  const levers = [
    { title: "Reduce waste", body: "Invalid traffic, duplicate attribution, and over-frequent retargeting: all measurable, all fixable." },
    { title: "Reprice inputs", body: "Pay less for the same customers by running first-price auctions with transparency on what you're buying." },
    { title: "Reweight spend", body: "Move budget toward channels, creatives, and audiences delivering provable incremental return." },
    { title: "Rebuild measurement", body: "Stop optimizing to lagging or wrong metrics. Get a measurement model that reflects reality." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · ROI Improvement"
        title="Same spend."
        italic="Provably more return."
        lead="Most performance budgets have 20–40% waste baked in: non-incremental conversions, inflated bids, frequency over-reach, bad creative. We find it and fix it."
        primary={{label:"Request an ROI audit", href:"contact"}}
        secondary={{label:"See the levers", href:"#levers"}}
        signals={[["+58%","ROAS index, 12mo"],["20–40%","Typical waste uncovered"],["pLTV","Value-based bidding"],["Nightly","Budget reallocation"]]}
        aside={<RoiSlope/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The ROI problem" title="Most 'growth'" italic="isn't really growth." lead="When attribution overcounts, frequency over-delivers, and non-incremental conversions get credit, your reported ROI drifts further and further from actual business results." />
          <ProblemResolution
            problem={{
              eyebrow: "WHAT'S INFLATING THE NUMBER",
              title: "Hidden drag on real return.",
              points: [
                "Non-incremental conversions counted as paid wins",
                "Over-frequency burning spend on already-sold users",
                "Invalid traffic slipping past post-bid verification",
                "Creative fatigue invisible until ROAS tanks",
              ]
            }}
            resolution={{
              eyebrow: "HOW WE FIX IT",
              title: "A cleaner measurement surface.",
              points: [
                "Holdout and geo-lift tests baked into reporting",
                "Global frequency caps across channels",
                "Pre-bid IVT filtering + continuous post-bid monitoring",
                "Creative health signals: refresh before CTR collapses",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="What drives the gain" title="Four ROI levers." italic="Pulled together." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section" id="levers">
        <div className="container">
          <SectionHeader eyebrow="The playbook" title="Where return" italic="actually comes from." lead="Improvement comes from four places. We work them in order, with measurement, so the gain is real and the lesson is reusable." />
          <NumberedSteps steps={levers}/>
        </div>
      </section>

      <FinalCTASection
        title="Want to see"
        italic="where the leaks are?"
        body="Send us a 90-day window of performance data. We'll run a waste-detection pass and return a prioritized list of fixes: the ones with the highest expected dollar impact first."
        primary={{label:"Request an audit", href:"contact"}}
        secondary={{label:"See measurement", href:"capabilities-measurement-attribution"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);