function Page() {
  const capabilities = [
    { tag: "AUDIENCE INTELLIGENCE", title: "Find ready-to-buy audiences", body: "First-party signals, lookalike expansion, and intent data identify prospects most likely to convert, not just click.", detail: "Seed → Match → Expand: with match rates 60–80% on qualified audiences." },
    { tag: "UNIFIED EXECUTION", title: "Reach them everywhere", body: "DSP, affiliate, and retargeting work from the same audience graph. A customer seen once doesn't get hit from every channel.", detail: "Cross-channel frequency caps + sequential messaging." },
    { tag: "OUTCOMES, NOT CLICKS", title: "Optimize toward conversion", body: "Bid and budget logic targets downstream revenue events, not just vanity engagement metrics.", detail: "Target-CPA, target-ROAS, and custom conversion-value bidding." },
    { tag: "FAST ITERATION", title: "Creative that learns", body: "Dynamic creative optimization tests headlines, images, and CTAs automatically and shifts spend toward winners.", detail: "Winner typically emerges in 7–14 days on active campaigns." },
  ];
  const funnel = [
    { title: "Awareness", body: "Contextual, lookalike, and high-intent prospecting across DSP and open exchanges." },
    { title: "Consideration", body: "Content-driven re-engagement and sequential creative that matches buying stage." },
    { title: "Decision", body: "Retargeting with dynamic product and offer logic to close active prospects." },
    { title: "Conversion", body: "Cross-channel frequency management so nobody sees 20 ads before buying." },
  ];
  const stats = [
    { label: "TYPICAL MATCH RATE", value: "60–80%", sub: "on qualified seed audiences" },
    { label: "MEDIAN CAC", value: "−28%", sub: "vs. fragmented stack, 90 days" },
    { label: "TIME TO FIRST LAUNCH", value: "2–3 wks", sub: "tracking, creative, and campaigns live" },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · Customer Acquisition"
        title="Acquire customers."
        italic="Not just clicks."
        lead="A coordinated stack that finds ready-to-buy audiences, reaches them on the right channel, and optimizes toward what actually drives revenue, not surface-level engagement."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the funnel", href:"#funnel"}}
        signals={[["3 layers","Prospecting → Retarget → Convert"],["Cross-channel","Frequency + sequencing"],["First-party","Audience primitives"],["Outcome","Driven bidding"]]}
        aside={<AudiencePrecision/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The acquisition reality" title="You're paying for clicks." italic="But selling products." lead="Most acquisition stacks optimize toward whatever the individual platform can measure: clicks, video completes, engagements. The real question is whether the customer came back and bought." />
          <ProblemResolution
            problem={{
              eyebrow: "WHAT GOES WRONG",
              title: "The lost signal.",
              points: [
                "Channels optimize for their own metrics, not your revenue",
                "Prospecting and retargeting chase the same users inefficiently",
                "Creative testing moves at campaign speed, not audience speed",
                "Incrementality is invisible: you pay for conversions you'd get anyway",
              ]
            }}
            resolution={{
              eyebrow: "WHAT AUCTERA CHANGES",
              title: "Acquisition, measured properly.",
              points: [
                "Bid logic trained on downstream revenue, not surface clicks",
                "One audience graph across prospecting, retarget, and partner channels",
                "Creative DCO that tests and scales winners automatically",
                "Incrementality testing built in: know what's net-new",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="How the stack works" title="Four layers." italic="One acquisition engine." lead="Each layer informs the next. Prospecting identifies, retargeting nurtures, conversion closes, and measurement tells you what was actually incremental." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section" id="funnel">
        <div className="container">
          <SectionHeader eyebrow="Full-funnel coverage" title="From first touch" italic="to confirmed purchase." />
          <NumberedSteps steps={funnel}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink)", color:"var(--paper)"}}>
        <div className="container">
          <div className="blockheader reveal center">
            <div className="eyebrow eyebrow-dot" style={{color:"rgba(246,242,236,0.55)"}}>Typical outcomes</div>
            <h2 className="display-2" style={{color:"var(--paper)"}}>What customers <span className="h-italic" style={{color:"var(--ochre)"}}>tend to see.</span></h2>
            <p className="lead" style={{color:"rgba(246,242,236,0.7)"}}>Ranges are directional, measured across self-reported results from active customers over the last twelve months. Your mileage will vary.</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:0, border:"1px solid rgba(246,242,236,0.15)", borderRadius:18, overflow:"hidden"}}>
            {stats.map((s,i)=>(
              <div key={i} style={{padding:"clamp(32px,3vw,48px)", borderRight: i < 2 ? "1px solid rgba(246,242,236,0.1)" : "none"}}>
                <div className="mono" style={{color:"rgba(246,242,236,0.55)", marginBottom:16}}>{s.label}</div>
                <div style={{fontFamily:"var(--font-display)", fontSize:"clamp(36px,4vw,56px)", color:"var(--ochre)", lineHeight:1, marginBottom:10}}>{s.value}</div>
                <p style={{color:"rgba(246,242,236,0.6)", margin:0, fontSize:14}}>{s.sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTASection
        title="Want to acquire"
        italic="the right customers?"
        body="Show us your funnel and one live channel. We'll walk through how unified audience, creative, and measurement would change the shape of it without a pitch deck."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See attribution in action", href:"platform-measurement"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);