function Page() {
  const profiles = [
    { title:"Performance Marketers", body:"You care about CPA and ROAS, not impressions. You want to see exactly where your budget goes." },
    { title:"Brands Running Affiliates + Programmatic", body:"You need channels to work together, not compete. Our DSP coordinates with affiliate and retargeting automatically." },
    { title:"Teams Frustrated with DSP Black Boxes", body:"You've asked your current DSP how bids are calculated and got vague answers. We show you everything." },
  ];
  const bad = [
    "Branding-only campaigns with no conversion tracking",
    "Teams who prefer managed service with no platform access",
    "Budgets under $5K/month (our minimums won't make sense)",
  ];
  const benefits = [
    { title:"Transparent Bidding", body:"See exactly how bids are calculated, where your spend goes, and why optimization decisions are made. No algorithms you can't audit.", callout:"Full Audit Trail" },
    { title:"Performance-First Optimization", body:"Optimization aligned to real conversions, not impressions or CTR. Campaigns tuned to your CPA and ROAS goals.", callout:"True CPA Optimization" },
    { title:"Channel Coordination", body:"DSP campaigns automatically coordinate with retargeting and affiliate to avoid overlap and frequency issues.", callout:"Unified Bidding" },
    { title:"Brand Safety Built-In", body:"Pre-bid filtering, verification partner integrations (IAS, DV), and contextual analysis keep your brand protected.", callout:"Pre-Bid Filtering" },
  ];
  const scenarios = [
    { title:"Scaling retargeting beyond walled gardens", problem:"Your retargeting is stuck in Meta and Google. You're hitting frequency limits and costs are rising.", solution:"Our DSP extends retargeting across open web, CTV, and mobile. Same audience data, new inventory, coordinated frequency." },
    { title:"Replacing underperforming DSP spend", problem:"You're spending on programmatic but can't explain where the money goes. Performance is inconsistent.", solution:"We show the full cost breakdown: media, data, tech fees, and optimize for your actual CPA goals, not proxy metrics." },
    { title:"Adding programmatic to affiliate mix", problem:"You run affiliates successfully but haven't cracked programmatic. You're worried about overlap.", solution:"Our DSP syncs with affiliate tracking. We suppress recent converters, share frequency caps, and avoid bidding against your own network." },
  ];
  const phases = [
    { num:"01", timeline:"Same day", title:"Connect tracking", body:"Integrate via pixel, S2S, or SDK. We support AppsFlyer, Adjust, Branch, Kochava, and custom MMPs." },
    { num:"02", timeline:"1–2 days", title:"Configure campaigns", body:"Set CPA or ROAS targets, define audiences, upload creatives. Our team reviews setup before launch." },
    { num:"03", timeline:"3–7 days", title:"Launch & learn", body:"Go live across premium inventory. Algorithms need 50–100 conversions to optimize: expect a short learning period." },
    { num:"04", timeline:"Ongoing", title:"Optimize continuously", body:"AI adjusts bids based on conversion signals. Weekly optimization reports, adjust targets anytime." },
  ];
  const included = [
    { t:"Self-Serve Platform Access", b:"Full control: create campaigns, adjust bids, pull reports anytime." },
    { t:"Named Account Manager", b:"Your point of contact for strategy, troubleshooting, and escalations." },
    { t:"Weekly Performance Reports", b:"Automated reports with insights, not just data dumps." },
    { t:"Same-Day Support", b:"Slack channel or email: responses within 4 business hours." },
  ];
  const compare = [
    ["Bidding Transparency", "Opaque algorithms", "Full cost breakdown"],
    ["CPA/ROAS Optimization", "Limited", "Native optimization target"],
    ["Fraud Prevention", "Paid add-on", "Built-in, no extra fee"],
    ["Cross-Channel Coordination", "Runs in isolation", "Syncs with affiliates + retargeting"],
    ["Data Ownership", "Shared with platform", "100% yours"],
  ];
  const faqs = [
    { q:"What are your minimum spend requirements?", a:"We work with advertisers spending $5K/month and up. Below that threshold, our platform fees don't make economic sense. For enterprise (>$50K/month), we offer custom pricing and dedicated support." },
    { q:"How does onboarding actually work?", a:"Four phases: connect tracking (same day), configure campaigns (1–2 days), launch & learn (3–7 days), then continuous optimization. Most accounts are in-flight within a week." },
    { q:"What tracking platforms do you integrate with?", a:"Pixel, S2S, or SDK. We support the major MMPs - AppsFlyer, Adjust, Branch, Kochava, and custom attribution stacks via our API." },
    { q:"How do you prevent overlap with my other channels?", a:"Our DSP coordinates with our affiliate network and retargeting cloud natively: shared frequency caps, suppressed recent converters, unified audience exclusions. You don't bid against yourself." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · DSP"
        title="Programmatic"
        italic="without black boxes."
        lead="See exactly how bids are calculated, where your budget goes, and why every optimization decision is made. Built for performance marketers who care about CPA and ROAS, not impressions."
        primary={{label:"Request demo", href:"contact"}}
        secondary={{label:"Self-serve signup", href:"#"}}
        micro="30-MIN DEMO · FULL PLATFORM ACCESS"
        signals={[["Billions","Daily bid requests"],["180+","Countries"],["50+","Supply partners"],["All formats","Display · Video · Native · CTV"]]}
        aside={<BidNodePanel/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Qualification protocol" title="Is this the right fit" italic="for your team?" lead="We believe in finding the right fit. Our platform is built for specific technical and commercial needs." />
          <FitSplit good={profiles} bad={bad}/>
          <div style={{marginTop:64, padding:"40px 48px", background:"var(--ink)", color:"var(--paper)", borderRadius:18, display:"flex", justifyContent:"space-between", alignItems:"center", gap:32, flexWrap:"wrap"}}>
            <div>
              <div className="mono" style={{color:"rgba(246,242,236,0.55)", marginBottom:8}}>COMMITMENT TO ROI</div>
              <h3 style={{fontFamily:"var(--font-display)", fontSize:"clamp(26px,3vw,38px)", margin:0, color:"var(--paper)"}}>We prefer to earn your business<br/><span className="h-italic" style={{color:"var(--ochre)"}}>than waste your budget.</span></h3>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Performance architecture" title="Why teams choose" italic="our DSP." lead="Built for marketers who want transparent buying, clearer optimization, and more control over spend."/>
          <Benefits items={benefits}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Strategic scenarios" title="Real problems." italic="Transparent resolutions." />
          <UseCases items={scenarios.map(s=>({title:s.title, problem:s.problem, solution:s.solution}))} />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Deployment sequence" title="How onboarding" italic="actually works." lead="From technical signup to optimized inventory access."/>
          <PhaseList phases={phases}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Service standard" title="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" style={{background:"var(--ink)", color:"var(--paper)"}}>
        <div className="container">
          <div className="blockheader reveal" style={{marginBottom:48}}>
            <div className="eyebrow eyebrow-dot" style={{color:"rgba(246,242,236,0.55)"}}>Competitive audit</div>
            <h2 className="display-2" style={{color:"var(--paper)"}}>Auctera DSP<br/><span style={{color:"var(--ochre)", fontStyle:"italic"}}>vs traditional DSPs.</span></h2>
          </div>
          <table className="compare" style={{background:"rgba(246,242,236,0.02)", border:"1px solid rgba(246,242,236,0.15)", borderRadius:18}}>
            <thead><tr>
              <th style={{color:"rgba(246,242,236,0.5)"}}>Attribute</th>
              <th style={{color:"rgba(246,242,236,0.5)"}}>Legacy DSPs</th>
              <th style={{color:"var(--ochre)"}}>Auctera DSP</th>
            </tr></thead>
            <tbody>
              {compare.map((r,i)=>(
                <tr key={i}>
                  <td style={{color:"var(--paper)"}}>{r[0]}</td>
                  <td style={{color:"rgba(246,242,236,0.5)"}}>{r[1]}</td>
                  <td style={{color:"var(--paper)", background:"rgba(201,139,58,0.08)"}}>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="mono" style={{marginBottom:8}}>KNOWLEDGE BASE</div>
          <SectionHeader title="Common questions." lead="Still have questions? Our team is ready to help you navigate the programmatic landscape."/>
          <FAQ items={faqs}/>
        </div>
      </section>

      <FinalCTASection title="Ready for" italic="transparent programmatic?" body="See how our DSP can improve your results while giving you complete visibility." primary={{label:"Request demo", href:"contact"}} secondary={{label:"Self-serve signup", href:"#"}}/>
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);