/* HOME — Auctera flagship */

function HomeHero() {
  useReveal();
  return (
    <section className="section" style={{paddingTop: 40}}>
      <div className="container">
        <div className="hero-two reveal">
          <div>
            <div className="eyebrow eyebrow-dot" style={{marginBottom: 28}}>Outcomes-first performance marketing</div>
            <h1 className="display-1" style={{marginBottom: 28, fontSize: "clamp(64px, 8.5vw, 140px)"}}>
              Scale without risk.<br/>
              <span className="h-italic">Settle on outcomes.</span>
            </h1>
            <p className="lead" style={{marginBottom: 40, maxWidth: "58ch"}}>
              Stop paying for impressions. Start acquiring high-value customers at global scale. Auctera combines the reach of a DSP with the ROI and accountability of an elite performance network — one engine, one truth.
            </p>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <a className="btn btn-lg" href="pages/platform-overview">View architecture <Arrow/></a>
              <a className="btn btn-ghost btn-lg" href="pages/contact">Request enterprise demo</a>
            </div>
          </div>
          <div>
            <HeroArchitecture/>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <section style={{padding: "32px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"}}>
      <div className="container" style={{display:"flex", gap: 32, alignItems:"center", justifyContent:"space-between", flexWrap:"wrap"}}>
        <div className="eyebrow">Engineering revenue for the top 1% of commerce</div>
        <div className="trust-strip">
          <span><span className="tick">◆</span>GDPR Native</span>
          <span><span className="tick">◆</span>CCPA Ready</span>
          <span><span className="tick">◆</span>SOC 2 Type II</span>
          <span><span className="tick">◆</span>Brand Safety Cert</span>
          <span><span className="tick">◆</span>IAB Tech Lab Member</span>
          <span><span className="tick">◆</span>TAG Certified Against Fraud</span>
        </div>
      </div>
    </section>
  );
}


function Fracture() {
  useReveal();
  const modules = [
    { title: "Programmatic DSP", bullets: ["Sub-50ms bid latency","Direct RTB integrations","Custom bidding algorithms"] },
    { title: "Affiliate Engine", bullets: ["Direct-to-advertiser payouts","Custom commission tiers","Vetted publisher pool"] },
    { title: "Audience Cloud", bullets: ["Server-side pixel tracking","Dynamic creative assembly","Cross-device identity"] },
    { title: "Yield Protection", bullets: ["Pre-bid IVT blocking","Real-time click scoring","Automated compliance"] },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="blockheader reveal">
          <div className="eyebrow eyebrow-dot">The fracture</div>
          <h2 className="display-2">Your data<br/><span className="h-italic">is bleeding.</span></h2>
          <p className="lead">Stitch together five platforms and you lose ~20% of conversions to latency, disjointed APIs and ad-blockers. We closed the leaks and rebuilt the plumbing.</p>
        </div>

        <div style={{marginBottom: 64}}>
          <FragmentedVsUnified/>
        </div>

        <div className="linegrid reveal">
          <div className="linegrid-row">
            {modules.slice(0,2).map((m,i)=>(
              <div key={i} className="linegrid-cell">
                <div className="mono" style={{marginBottom:14}}>MODULE · 0{i+1}</div>
                <h4>{m.title}</h4>
                <ul className="checklist" style={{marginTop:18}}>{m.bullets.map((b,j)=><li key={j}>{b}</li>)}</ul>
              </div>
            ))}
          </div>
          <div className="linegrid-row">
            {modules.slice(2,4).map((m,i)=>(
              <div key={i} className="linegrid-cell">
                <div className="mono" style={{marginBottom:14}}>MODULE · 0{i+3}</div>
                <h4>{m.title}</h4>
                <ul className="checklist" style={{marginTop:18}}>{m.bullets.map((b,j)=><li key={j}>{b}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AudienceBlocks() {
  useReveal();
  const blocks = [
    {
      aud: "For E-Commerce Brands", title: "Deterministic growth.",
      body: "Bypass iOS restrictions with native server-side infrastructure and reclaim true ROAS. Stop buying chaotic impressions — trade on outcomes.",
      stats: [["+38%","Guaranteed margin increase"],["99.9%","Deterministic match rate"]],
      motif: "SERVER_SIDE_ROUTING",
      detail: [["Target CPA","$45.00"],["Signal","1P Verified"]]
    },
    {
      aud: "For Global Agencies", title: "Total liquidity control.",
      body: "Command your entire client portfolio from a single un-fractured terminal. Arbitrage traffic globally with zero data loss between reporting environments.",
      stats: [["0ms","Reporting reconciliation delay"],["Unlimited","Client capacity"]],
      motif: "PORTFOLIO_LIQUIDITY",
      detail: [["Book A","FinTech"],["Book B","E-Com"]]
    },
    {
      aud: "For Elite Affiliates", title: "Instantaneous settlement.",
      body: "Trade on the most liquid exchange in the industry. Direct programmatic plumbing guarantees your yields and settles payouts on the hour.",
      stats: [["< 10ms","Routing latency"],["100%","Yield guarantees"]],
      motif: "SETTLEMENT_TERMINAL",
      detail: [["Cleared Yield","$124,550"],["Status","Releasing"]]
    }
  ];
  return (
    <section className="section" style={{background: "var(--paper-2)"}}>
      <div className="container">
        <div className="blockheader reveal">
          <div className="eyebrow eyebrow-dot">Built for action</div>
          <h2 className="display-2">Engineered for<br/><span className="h-italic">algorithmic scale.</span></h2>
          <p className="lead">Select your operating theater to see how the D-REVX engine adapts to your specific liquidity needs.</p>
        </div>

        <div className="grid grid-3 reveal-stagger">
          {blocks.map((b,i)=>(
            <article key={i} className="card" style={{display:"grid", gap: 20, padding: 32, background: "var(--paper)"}}>
              <div className="eyebrow">{b.aud}</div>
              <div style={{
                background: "var(--ink)", color: "var(--paper)", borderRadius: 12,
                padding: 20, fontFamily:"var(--font-mono)", fontSize: 11, letterSpacing: "0.12em"
              }}>
                <div style={{display:"flex", justifyContent:"space-between", marginBottom: 14, color:"rgba(246,242,236,0.6)"}}>
                  <span>// {b.motif}</span>
                  <span className="pulse-dot" style={{width:6, height:6, borderRadius:"50%", background:"var(--ochre)"}}/>
                </div>
                {b.detail.map(([k,v], j)=>(
                  <div key={j} style={{display:"flex", justifyContent:"space-between", padding:"6px 0", borderTop: j?"1px solid rgba(246,242,236,0.12)":"none"}}>
                    <span style={{color:"rgba(246,242,236,0.6)"}}>{k}</span>
                    <span style={{color:"var(--paper)"}}>{v}</span>
                  </div>
                ))}
              </div>
              <h3 className="h3">{b.title}</h3>
              <p style={{color:"var(--muted)", margin:0, fontSize:15}}>{b.body}</p>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, paddingTop:16, borderTop:"1px solid var(--line)"}}>
                {b.stats.map(([n,l], j)=>(
                  <div key={j} className="stat">
                    <div className="num" style={{fontSize:32}}>{n}</div>
                    <div className="label">{l}</div>
                  </div>
                ))}
              </div>
              <a className="link" href="#">Explore <Arrow/></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function LegacyVsEngine() {
  useReveal();
  return (
    <section className="section">
      <div className="container">
        <div className="blockheader reveal">
          <div className="eyebrow eyebrow-dot">The cost of disconnected tech</div>
          <h2 className="display-2">Every API hop<br/><span className="h-italic">costs you conversions.</span></h2>
          <p className="lead">Every fractured dashboard hides margin. We moved the plumbing inside.</p>
        </div>

        <div className="grid grid-2 reveal-stagger">
          <div className="card" style={{padding:40}}>
            <div className="mono" style={{marginBottom:14}}>SILOS & LATENCY</div>
            <h3 className="display-3" style={{marginBottom:28, fontSize:"clamp(28px,3vw,40px)"}}>The Legacy Stack</h3>
            <div style={{display:"grid", gap:20}}>
              {[
                ["Relies on Third-Party Cookies","Blocked by iOS and modern browsers."],
                ["Batch Data Syncs (4 hours)","Campaigns optimize on stale data."],
                ["Disjointed Teams","DSP and affiliate teams cannibalize each other."]
              ].map(([t,d], i)=>(
                <div key={i} style={{paddingLeft:16, borderLeft:"2px solid var(--clay)"}}>
                  <div style={{fontWeight:500, marginBottom:4}}>{t}</div>
                  <div style={{color:"var(--muted)", fontSize:14}}>{d}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="card card-dark" style={{padding:40}}>
            <div className="mono" style={{marginBottom:14, color:"rgba(246,242,236,0.5)"}}>ABSOLUTE UNIFICATION</div>
            <h3 className="display-3" style={{marginBottom:28, fontSize:"clamp(28px,3vw,40px)", color:"var(--paper)"}}>Deterministic Engine</h3>
            <div style={{display:"grid", gap:20}}>
              {[
                ["First-Party Server-Based","Track every conversion natively, immune to ad-blockers."],
                ["Real-Time Millisecond Analytics","Sub-50ms continuous ingestion for instant optimization."],
                ["One Unified Margin Engine","Network and programmatic bids share the same truth."]
              ].map(([t,d], i)=>(
                <div key={i} style={{paddingLeft:16, borderLeft:"2px solid var(--ochre)"}}>
                  <div style={{fontWeight:500, marginBottom:4, color:"var(--paper)"}}>{t}</div>
                  <div style={{color:"rgba(246,242,236,0.65)", fontSize:14}}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Infrastructure() {
  useReveal();
  const stats = [
    { n:"< 50ms", l:"AVG EXECUTION", t:"Sub-50ms latency", b:"Global edge network ensures your bids execute before the competition even authenticates." },
    { n:"100%", l:"COOKIE INDEPENDENCE", t:"Server-side pixels", b:"Bypass iOS restrictions and ad-blockers with native, server-to-server tracking." },
    { n:"0.01%", l:"IVT RATE", t:"Pre-bid fraud defense", b:"ML models evaluate 120+ data points pre-click, so you never pay for bot traffic." },
    { n:"99.99%", l:"UPTIME SLA", t:"Holiday-rush infrastructure", b:"Never drop a bid or miss a conversion even during massive traffic surges." },
  ];
  return (
    <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)"}}>Algorithmic infrastructure</div>
          <h2 className="display-2" style={{color:"var(--paper)"}}>Zero data gravity.<br/><span style={{color:"var(--ochre)", fontStyle:"italic"}}>Millisecond plumbing.</span></h2>
          <p className="lead" style={{color:"rgba(246,242,236,0.72)"}}>We engineered the millisecond plumbing so you don't have to. Built for deterministic targeting and absolute margin protection.</p>
          <div><a className="btn btn-ochre" href="pages/platform-overview">View system specs <Arrow/></a></div>
        </div>

        <div className="grid grid-4 reveal-stagger" style={{marginTop:32}}>
          {stats.map((s,i)=>(
            <div key={i} style={{borderTop:"1px solid rgba(246,242,236,0.15)", paddingTop:24}}>
              <div style={{fontFamily:"var(--font-display)", fontSize:"clamp(40px,4vw,64px)", lineHeight:1, letterSpacing:"-0.02em", color:"var(--paper)"}}>{s.n}</div>
              <div className="mono" style={{color:"rgba(246,242,236,0.55)", marginTop:10}}>{s.l}</div>
              <h4 style={{fontFamily:"var(--font-display)", fontSize:22, marginTop:22, marginBottom:8, color:"var(--paper)"}}>{s.t}</h4>
              <p style={{color:"rgba(246,242,236,0.65)", fontSize:14, margin:0}}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LiquidityNetwork() {
  useReveal();
  return (
    <section className="section">
      <div className="container">
        <div className="hero-two reveal">
          <div>
            <div className="eyebrow eyebrow-dot" style={{marginBottom:24}}>Liquidity network</div>
            <h2 className="display-2" style={{marginBottom:24}}>Algorithmic<br/><span className="h-italic">yield routing.</span></h2>
            <p className="lead" style={{marginBottom:32}}>We don't just reach 240+ GEOs — we actively trade them. The Auctera Engine reroutes bids across the globe in milliseconds, hunting the exact moment where impression cost hits rock bottom and conversion probability peaks.</p>
            <div className="grid grid-2" style={{gap:24}}>
              {[["240+","Active liquidity pools"],["4.5B+","Decisions / month"],["<10ms","Routing latency"],["Zero-loss","Data handoff"]].map(([n,l],i)=>(
                <div key={i} className="stat"><div className="num" style={{fontSize:36}}>{n}</div><div className="label">{l}</div></div>
              ))}
            </div>
          </div>
          <div><LiquidityGlobe/></div>
        </div>
      </div>
    </section>
  );
}

function CaseStudies() {
  useReveal();
  const cases = [
    { tag:"D2C", cat:"E-COMMERCE", href:"pages/case-d2c-fashion-roas", title:"D2C fashion brand", sum:"340% increase in affiliate-driven revenue", detail:"Scaled affiliate program in 18 months using a coordinated multi-channel approach.", metrics:[["+340%","Revenue growth"],["-42%","CPA reduction"],["12.8x","ROAS"]] },
    { tag:"FT", cat:"FINTECH", href:"pages/case-fintech-app-installs", title:"Fintech app installs", sum:"4.2M qualified leads generated", detail:"Became the #1 acquisition channel for new account signups.", metrics:[["4.2M","Qualified leads"],["-58%","Cost per lead"],["+127%","Conv. rate"]] },
    { tag:"EDU", cat:"EDTECH", href:"pages/case-edtech-lower-cpa", title:"EdTech platform", sum:"Lowered CPA by 47% in two quarters", detail:"Scaled enrollments while consolidating spend across DSP, affiliate and retargeting.", metrics:[["-47%","CPA reduction"],["+62%","Enrollments"],["3.4x","Pipeline"]] },
    { tag:"B2B", cat:"SAAS", href:"pages/case-b2b-saas-mrr", title:"B2B SaaS MRR", sum:"Reduced CAC by 65% at scale", detail:"Achieved profitable growth milestone 6 months ahead of schedule.", metrics:[["-65%","CAC"],["2.1M","New MRR"],["+89%","Pipeline"]] },
  ];
  return (
    <section className="section" style={{background:"var(--paper-2)"}}>
      <div className="container">
        <div className="blockheader reveal" style={{display:"flex", justifyContent:"space-between", alignItems:"end", maxWidth:"none", flexWrap:"wrap", gap:24}}>
          <div>
            <div className="eyebrow eyebrow-dot">Proven results</div>
            <h2 className="display-2" style={{marginTop:16}}>Real outcomes,<br/><span className="h-italic">audited in production.</span></h2>
          </div>
          <a className="link" href="pages/case-studies">View all case studies <Arrow/></a>
        </div>

        <div className="grid grid-2 reveal-stagger">
          {cases.map((c,i)=>(
            <a key={i} href={c.href} className="card" style={{padding:40, background:"var(--paper)", display:"block", textDecoration:"none", color:"inherit"}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:28}}>
                <div style={{
                  width:56, height:56, borderRadius:"50%", background:"var(--ink)", color:"var(--paper)",
                  display:"grid", placeItems:"center", fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:18
                }}>{c.tag}</div>
                <span className="mono">{c.cat}</span>
              </div>
              <h3 className="h3" style={{marginBottom:10}}>{c.title}</h3>
              <p style={{fontSize:17, fontWeight:500, color:"var(--ink)", margin:"0 0 8px"}}>{c.sum}</p>
              <p style={{color:"var(--muted)", margin:0, fontSize:14.5}}>{c.detail}</p>
              <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:16, marginTop:32, paddingTop:24, borderTop:"1px solid var(--line)"}}>
                {c.metrics.map(([n,l],j)=>(<div key={j} className="stat"><div className="num" style={{fontSize:24}}>{n}</div><div className="label" style={{fontSize:10}}>{l}</div></div>))}
              </div>
              <div style={{marginTop:28}}><span className="link">Read full case study <Arrow/></span></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  useReveal();
  return (
    <section className="section">
      <div className="container">
        <div className="cta-dark reveal">
          <div style={{display:"grid", gridTemplateColumns:"1fr auto", gap:40, alignItems:"end"}}>
            <div>
              <div className="eyebrow eyebrow-dot" style={{color:"rgba(246,242,236,0.6)", marginBottom:20}}>New era</div>
              <h2 className="display-2" style={{color:"var(--paper)", marginBottom:20}}>The era of fractured<br/>marketing <span className="h-italic" style={{color:"var(--ochre)"}}>is over.</span></h2>
              <p className="lead" style={{color:"rgba(246,242,236,0.75)", maxWidth:"52ch"}}>Stop bleeding data. Start trading outcomes analytically. The absolute standard in revenue engineering is here.</p>
            </div>
            <div>
              <a className="btn btn-ochre btn-lg" href="pages/contact">Initialize architecture <Arrow/></a>
            </div>
          </div>
          <div className="trust-strip" style={{marginTop:48, paddingTop:32, borderTop:"1px solid rgba(246,242,236,0.15)", color:"rgba(246,242,236,0.55)"}}>
            <span><span className="tick" style={{color:"var(--ochre)"}}>◆</span>SOC 2 Type II Compliant</span>
            <span><span className="tick" style={{color:"var(--ochre)"}}>◆</span>GDPR Native Infrastructure</span>
            <span><span className="tick" style={{color:"var(--ochre)"}}>◆</span>ISO 27001 Certified</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <Header basePath="" active="home"/>
      <HomeHero/>
      <TrustStrip/>
      {typeof LogoCloud !== 'undefined' ? <LogoCloud/> : <div style={{padding: 40, textAlign: 'center'}}>Logo Cloud Loading...</div>}
      <Fracture/>
      <AudienceBlocks/>
      <LegacyVsEngine/>
      <Infrastructure/>
      <LiquidityNetwork/>
      <CaseStudies/>
      <ConferenceSection/>
      <FinalCTA/>
      <Footer basePath=""/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage/>);