function Page() {
  const good = [
    { title:"E-commerce Brands with Traffic", body:"You're getting site visitors but conversion rate could be higher. You want to bring back abandoners." },
    { title:"Teams Hitting Frequency Limits", body:"Your retargeting is stuck in walled gardens. Costs rising, inventory shrinking." },
    { title:"Advertisers Running Multi-Channel", body:"You need retargeting that coordinates with DSP and affiliate, not competing with them." },
  ];
  const bad = [
    "Sites with very low monthly traffic (under 10K visitors)",
    "B2B with very long sales cycles (6+ months)",
    "Brands without product catalog or pricing data",
  ];
  const useCases = [
    { title:"Reducing cart abandonment", problem:"70% of carts get abandoned. Meta and Google retargeting hit frequency limits fast. Costs keep rising.", solution:"Extend retargeting to open web, native, and CTV. Same user data, more inventory, coordinated frequency across all channels." },
    { title:"Cross-device recovery", problem:"Users browse on mobile but buy on desktop. Your mobile retargeting misses the conversion.", solution:"Our identity graph connects devices. Reach the same user wherever they are, with frequency capping that follows them." },
    { title:"Unified retargeting + prospecting", problem:"Your retargeting and prospecting campaigns compete with each other. You're bidding against yourself.", solution:"Retargeting coordinates with the DSP. We suppress recent converters, share frequency caps, and optimize bids together." },
  ];
  const caps = [
    { title:"Cross-Device Identity", body:"Deterministic + probabilistic matching reaches users across all their devices without relying solely on cookies.", callout:"Cookie-less ready" },
    { title:"Dynamic Creative", body:"Automatically personalize ads based on products viewed, cart contents, and browsing behavior.", callout:"Personalized at scale" },
    { title:"Frequency Management", body:"Intelligent frequency capping across all channels prevents ad fatigue and wasted spend.", callout:"No wasted impressions" },
    { title:"Coordinated Bidding", body:"Retargeting bids coordinate with DSP and affiliate to avoid bidding against yourself for the same user.", callout:"Unified bidding" },
  ];
  const included = [
    { t:"Tag + Integration Setup", b:"Pixel, SDK, or S2S: we handle implementation." },
    { t:"Audience Configuration", b:"Pre-built segments plus custom segments you define." },
    { t:"Dynamic Creative", b:"Auto-generated ads from your product feed." },
    { t:"Ongoing Optimization", b:"AI adjusts bids, frequency, and creative automatically." },
  ];
  const segments = [
    { title:"Cart Abandoners", intent:"Highest intent", body:"Users who added to cart but didn't purchase." },
    { title:"Browse Abandoners", intent:"High intent", body:"Product page visitors who didn't add to cart." },
    { title:"Past Purchasers", intent:"Known converters", body:"Cross-sell and upsell to existing customers." },
    { title:"Lapsed Customers", intent:"Re-engagement", body:"Win back customers who haven't purchased recently." },
    { title:"High-Value Prospects", intent:"Prospecting", body:"Lookalikes of your best customers." },
    { title:"Custom Segments", intent:"Flexible", body:"Build any segment based on your first-party data." },
  ];
  const channels = ["Display","Native","Social","Video","CTV","Email"];
  const faqs = [
    { q:"How does this work without cookies?", a:"We combine first-party data (your pixel or SDK), deterministic matching (logged-in users), and probabilistic identity graphs. Cookie deprecation is a problem for some retargeters: we've built for a post-cookie world." },
    { q:"What's the minimum traffic requirement?", a:"We recommend at least 10K monthly site visitors. Below that, audience pools are too small for effective retargeting. As you scale, retargeting becomes more efficient." },
    { q:"How does this integrate with my existing retargeting?", a:"Run our retargeting alongside Meta/Google, or migrate entirely. We ingest conversion data to prevent overlap. Most advertisers see better results by consolidating." },
    { q:"What about brand safety?", a:"Pre-bid filtering, verification partner integrations (IAS, DV), and contextual analysis are included. You control where your ads appear." },
    { q:"How long until I see results?", a:"Most advertisers see meaningful data within 1–2 weeks. Optimization improves as algorithms learn your audience. Expect 4–6 weeks to stabilize." },
    { q:"Do you support dynamic product ads?", a:"Yes. Connect your product feed (Google Shopping, Shopify, or custom) and we auto-generate personalized ads showing the exact products users viewed or added to cart." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · Retargeting Cloud"
        title="Bring back buyers."
        italic="Convert more."
        lead="Cookie-less retargeting that reaches users across all devices and channels. Dynamic creative, intelligent frequency capping, and full coordination with your other campaigns."
        primary={{label:"Request demo", href:"contact"}}
        secondary={{label:"How it works", href:"platform-how-it-works"}}
        micro="30-MIN CALL · WE'LL REVIEW YOUR SETUP"
        signals={[["Cross-device","Identity graph"],["Dynamic","Creative generation"],["Cookie-less","Future-proof"],["Unified","Frequency capping"]]}
        aside={<RetargetGraphPanel/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Qualification" title="Is this the right fit" italic="for your program?"/>
          <FitSplit good={good} bad={bad}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Common use cases" title="Real problems" italic="our retargeting solves."/>
          <UseCases items={useCases}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Key capabilities" title="What makes it" italic="actually work."/>
          <Benefits items={caps}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="What's included"/>
          <div className="grid grid-4 reveal-stagger">
            {included.map((it,i)=>(
              <div key={i} className="card" style={{padding:28}}>
                <div style={{width:36, height:36, borderRadius:"50%", background:"var(--ochre)", marginBottom:18}}/>
                <h4 style={{fontFamily:"var(--font-display)", fontSize:20, margin:"0 0 8px"}}>{it.t}</h4>
                <p style={{color:"var(--muted)", fontSize:14, margin:0}}>{it.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Pre-built audience segments" title="Ready to use," italic="or build your own."/>
          <div className="grid grid-3 reveal-stagger">
            {segments.map((s,i)=>(
              <div key={i} className="card" style={{padding:28}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:12}}>
                  <h4 style={{fontFamily:"var(--font-display)", fontSize:22, margin:0}}>{s.title}</h4>
                  <span className="mono" style={{color:"var(--ochre-deep)"}}>{s.intent}</span>
                </div>
                <p style={{color:"var(--muted)", fontSize:14, margin:0}}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink)", color:"var(--paper)"}}>
        <div className="container">
          <div className="blockheader reveal" style={{marginBottom:32}}>
            <div className="eyebrow eyebrow-dot" style={{color:"rgba(246,242,236,0.55)"}}>Reach users everywhere</div>
            <h2 className="display-2" style={{color:"var(--paper)"}}>One audience.<br/><span style={{color:"var(--ochre)", fontStyle:"italic"}}>Every channel.</span></h2>
          </div>
          <ChannelOrbit/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Knowledge base" title="Common questions."/>
          <FAQ items={faqs}/>
        </div>
      </section>

      <FinalCTASection title="Ready to" italic="convert more buyers?" body="See how our retargeting cloud can bring back more of your site visitors. 30-minute call: we'll review your current retargeting and show you what's possible." primary={{label:"Request demo", href:"contact"}}/>
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);