function Page() {
  const capabilities = [
    { tag: "REACH PLANNING", title: "Build incremental reach", body: "Reach-curve modeling shows you where additional impressions add new humans vs. over-serve the same people.", detail: "Reach · frequency · waste curves on every campaign." },
    { tag: "PREMIUM INVENTORY", title: "Quality brand environments", body: "CTV, premium digital video, and vetted publisher inventory: environments your brand can stand next to.", detail: "Curated supply path + brand-safety stack included." },
    { tag: "BRAND LIFT STUDIES", title: "Measure what matters", body: "Brand lift studies run on every campaign, measuring recall, consideration, and intent, not just clicks.", detail: "Integrated Kantar + third-party measurement partners." },
    { tag: "SHARE OF VOICE", title: "Category awareness tracking", body: "Monitor your category presence against competitors continuously. Know when share of voice slips.", detail: "Competitive reporting with share-of-voice benchmarking." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · Brand Awareness"
        title="Build the brand."
        italic="Measure the lift."
        lead="Upper-funnel programmatic with the measurement rigor of performance. Reach planning, premium inventory, and brand-lift studies that actually produce readable results."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the channel mix", href:"#mix"}}
        signals={[["+14pt","Typical brand-lift"],["Premium","CTV + video inventory"],["Continuous","Brand safety"],["Measurable","Reach + lift + SOV"]]}
        aside={<PremiumReachLift/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Upper-funnel reality" title="Brand spend" italic="is too often unmeasured." lead="Performance teams have dashboards. Brand teams have opinions. We think both deserve the same measurement rigor." />
          <ProblemResolution
            problem={{
              eyebrow: "WHY BRAND GETS CUT FIRST",
              title: "The unmeasured budget.",
              points: [
                "No line of sight from impressions to brand outcomes",
                "Reach and frequency invisible once campaign is in-flight",
                "No clean way to compare incremental brand lift across channels",
                "Share of voice tracked manually, quarterly, if at all",
              ]
            }}
            resolution={{
              eyebrow: "BRAND, MEASURED",
              title: "Upper-funnel with real numbers.",
              points: [
                "Reach-curve planning pre-launch, reach tracking in-flight",
                "Brand-lift studies on every flighted campaign",
                "Continuous competitive share-of-voice monitoring",
                "Premium CTV + video inventory with brand-safety layer",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}} id="mix">
        <div className="container">
          <SectionHeader eyebrow="What's included" title="The brand stack." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <FinalCTASection
        title="Want to build the brand"
        italic="with the numbers to prove it?"
        body="Bring us a category and a budget. We'll propose a reach plan, inventory mix, and the brand-lift study design: before you spend a dollar."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See programmatic", href:"capabilities-programmatic"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);