function Page() {
  const problems = [
    { t: "Fragmented data across platforms", b: "Your DSP says one thing, your affiliate network another, retargeting a third. Which is right?", tk: "You can't optimize what you can't measure consistently." },
    { t: "Channels competing against each other", b: "Your DSP bids against retargeting. Your affiliates claim credit that belongs to paid search. You pay twice for the same user.", tk: "Wasted budget, inflated CAC." },
    { t: "Hours spent reconciling data", b: "Every week someone spends hours in spreadsheets trying to make the numbers match. They never quite do.", tk: "Time on data wrangling instead of strategy." },
    { t: "Blind spots in the journey", b: "You see clicks and conversions but not the path between them. Did retargeting help? Did that affiliate touchpoint matter?", tk: "Decisions made with incomplete information." },
  ];
  const steps = [
    { n: "1", t: "Unified Data Layer", b: "All your first-party data, pixels, and tracking live in one place. Import audiences from any source." },
    { n: "2", t: "Cross-Channel Execution", b: "Launch campaigns across DSP, affiliates, and retargeting from one interface. Audiences sync automatically." },
    { n: "3", t: "Coordinated Delivery", b: "Frequency caps, exclusion lists, and sequential messaging work across all channels." },
    { n: "4", t: "Unified Attribution", b: "Every touchpoint feeds into one attribution model. See the real journey, not fragmented platform views." },
  ];
  const benefits = [
    { title: "Single source of truth", body: "All channels report to one attribution system. No more conflicting numbers or platform bias." },
    { title: "Coordinated execution", body: "Channels work together instead of competing. Frequency caps span platforms. Audiences sync automatically." },
    { title: "Consolidated optimization", body: "Optimize toward business outcomes, not platform metrics. One budget, one goal, one strategy." },
    { title: "Simplified operations", body: "One login, one contract, one support team, one invoice. Less vendor management, more marketing." },
  ];
  const products = [
    { name:"Demand-Side Platform", desc:"Programmatic buying with transparency", body:"Access premium inventory across display, video, native, and CTV. See exactly where your ads run.", feats:["Real-time bidding","Transparent pricing","Brand safety","Audience targeting"], href:"platform-dsp" },
    { name:"Affiliate Network", desc:"Performance partnerships that scale", body:"Connect with vetted publishers or bring your own. Multi-touch attribution and fraud blocking built in.", feats:["Publisher marketplace","Fraud prevention","Multi-touch attribution","Real-time tracking"], href:"platform-affiliate" },
    { name:"Retargeting Cloud", desc:"Bring back your best prospects", body:"Cross-device retargeting that follows the customer journey intelligently. Dynamic creative, frequency management.", feats:["Cross-device ID","Dynamic creative","Frequency capping","Sequential messaging"], href:"platform-retargeting" },
    { name:"Measurement & Attribution", desc:"Know what actually works", body:"Multi-touch attribution across all channels, not just the ones we own. Incrementality and unified measurement.", feats:["Multi-touch models","Incrementality","Cross-channel view","Custom windows"], href:"platform-measurement" },
    { name:"Reporting & Analytics", desc:"Real-time insights, zero spreadsheets", body:"Dashboards that update in real-time. Scheduled reports, custom views, and exports that work with your tools.", feats:["Real-time dashboards","Scheduled delivery","Custom metrics","API access"], href:"platform-reporting" },
    { name:"Fraud Prevention", desc:"Invalid traffic blocked before it bills", body:"ML models trained on billions of events. Pre-bid filtering, post-click validation, transparent blocking logs.", feats:["Pre-bid filtering","Bot detection","Click validation","Blocking transparency"], href:"#" },
  ];
  const compare = [
    ["Attribution", "Each platform claims credit. Numbers conflict.", "One model, all touchpoints. Clear picture."],
    ["Frequency", "Each platform has its own caps. Users see ads 20×.", "Global caps across all channels. Users see ads 5×."],
    ["Audience sync", "Manual exports between platforms.", "Real-time sync across DSP, affiliates, retargeting."],
    ["Reporting", "Export from each platform. Merge in spreadsheets.", "One dashboard. All channels. Real-time."],
    ["Optimization", "Optimize each channel separately.", "Optimize toward total outcomes. Shift budget where it works."],
  ];
  const faqs = [
    { q:"Can I use just one part of the platform?", a:"Yes. While it works best unified, you can start with just DSP, just affiliates, or just retargeting. Most customers start with one and expand as they see results." },
    { q:"What if I already have an affiliate network or DSP?", a:"You can run Auctera alongside existing platforms during evaluation. Our attribution can track conversions from external sources for fair comparison." },
    { q:"How long does implementation take?", a:"Most customers run their first campaigns within 2–3 weeks. If migrating from existing platforms, we provide hands-on migration support." },
    { q:"What's the minimum budget?", a:"No strict minimum. We work with growing brands spending $10K/month and enterprises spending $1M+. Pricing scales with usage." },
    { q:"How is this different from Google or Meta?", a:"Walled gardens show you performance inside their ecosystem. We connect the dots across channels: affiliates, partnerships, other media: for the complete picture." },
    { q:"What about my existing data and audiences?", a:"Import your CRM data, retargeting lists, and segments. We support integrations with major CDPs, CRMs, and data warehouses." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · Overview"
        title="One platform."
        italic="Six products that actually work together."
        lead="DSP. Affiliate Network. Retargeting Cloud. Attribution. Reporting. Fraud Prevention. Six products, one login: so you can see the complete customer journey and stop paying twice for the same conversion."
        primary={{label:"See it in action", href:"contact"}}
        secondary={{label:"How it works", href:"platform-how-it-works"}}
        signals={[["6","Integrated products"],["1","Unified data layer"],["All","Channels, one view"],["0","Duplicate conversions"]]}
        aside={<PlatformProductMosaic/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The fragmented stack problem" title="Your performance stack" italic="is working against itself." lead="The average performance team uses 4–7 platforms. Each optimizes for its own metrics, claims credit for the same conversions, and shows a different version of reality." />
          <div className="grid grid-2 reveal-stagger">
            {problems.map((p,i)=>(
              <div key={i} className="card" style={{padding: 36}}>
                <div className="mono" style={{marginBottom: 12}}>PROBLEM · 0{i+1}</div>
                <h4 style={{fontFamily:"var(--font-display)", fontSize:26, lineHeight:1.15, margin:"0 0 14px"}}>{p.t}</h4>
                <p style={{color:"var(--muted)", fontSize:15, margin:"0 0 18px"}}>{p.b}</p>
                <div style={{paddingTop:18, borderTop:"1px solid var(--line)", fontSize:14, color:"var(--ochre-deep)", fontStyle:"italic", fontFamily:"var(--font-display)"}}>→ {p.tk}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="The unified approach" title="One platform" italic="that actually works together." lead="When your DSP, affiliate network, and retargeting cloud share the same data layer, attribution system, and audience segments: everything changes." />
          <div className="grid grid-4 reveal-stagger">
            {steps.map((s,i)=>(
              <div key={i} style={{borderTop:"1px solid var(--line-strong)", paddingTop:20}}>
                <div style={{fontFamily:"var(--font-display)", fontSize:48, lineHeight:1, fontStyle:"italic", color:"var(--ochre)"}}>{s.n}</div>
                <h4 style={{fontFamily:"var(--font-display)", fontSize:22, margin:"20px 0 10px"}}>{s.t}</h4>
                <p style={{color:"var(--muted)", fontSize:14.5, margin:0}}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Unified benefits" title="What changes" italic="when the stack becomes one." />
          <Benefits items={benefits}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink)", color:"var(--paper)"}}>
        <div className="container">
          <div className="blockheader reveal">
            <div className="eyebrow eyebrow-dot" style={{color:"rgba(246,242,236,0.55)"}}>Side by side</div>
            <h2 className="display-2" style={{color:"var(--paper)"}}>Fragmented <span className="h-italic" style={{color:"var(--ochre)"}}>vs</span> unified.</h2>
          </div>
          <table className="compare" style={{background:"rgba(246,242,236,0.02)", border:"1px solid rgba(246,242,236,0.15)", borderRadius:18, overflow:"hidden"}}>
            <thead><tr>
              <th style={{color:"rgba(246,242,236,0.5)"}}>Aspect</th>
              <th style={{color:"rgba(246,242,236,0.5)"}}>Fragmented stack</th>
              <th style={{color:"var(--ochre)"}}>Unified platform</th>
            </tr></thead>
            <tbody>
              {compare.map((row,i)=>(
                <tr key={i}>
                  <td style={{color:"var(--paper)"}}>{row[0]}</td>
                  <td style={{color:"rgba(246,242,236,0.5)"}}>{row[1]}</td>
                  <td style={{color:"var(--paper)", background:"rgba(201,139,58,0.08)"}}>{row[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Six products, one platform" title="Each is powerful alone." italic="Together, they're unmatched." />
          <div className="grid grid-2 reveal-stagger" style={{gap:24}}>
            {products.map((p,i)=>(
              <article key={i} className="card" style={{padding:36}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18}}>
                  <div className="mono">PRODUCT · 0{i+1}</div>
                  <div className="pill pill-dot">Included</div>
                </div>
                <h3 className="h3" style={{marginBottom:6}}>{p.name}</h3>
                <div style={{color:"var(--ochre-deep)", fontStyle:"italic", fontFamily:"var(--font-display)", marginBottom:14}}>{p.desc}</div>
                <p style={{color:"var(--muted)", fontSize:15, margin:"0 0 20px"}}>{p.body}</p>
                <div style={{display:"flex", gap:6, flexWrap:"wrap", marginBottom:24}}>
                  {p.feats.map((f,j)=><span key={j} className="pill">{f}</span>)}
                </div>
                <a className="link" href={p.href}>Explore {p.name} <Arrow/></a>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Common questions" title="Frequently asked"/>
          <FAQ items={faqs}/>
        </div>
      </section>

      <FinalCTASection
        title="Ready to see"
        italic="the complete picture?"
        body="We'll walk you through the platform with your specific use case in mind. No generic demo: just the parts that matter to you."
        primary={{label:"Schedule a walkthrough", href:"contact"}}
        secondary={{label:"See advertiser solutions", href:"#"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);