function Page() {
  const capabilities = [
    { tag: "QUALITY ASSURED", title: "Vetted demand only", body: "Every advertiser is reviewed before activation to reduce risky creatives, cloaking, and brand-damaging issues.", detail: "Manual review + automated classification: no unvetted inventory sellers." },
    { tag: "REAL-TIME REPORTING", title: "Transparent revenue reporting", body: "See who is buying your inventory, what rates are clearing, and how placements perform without black-box reporting.", detail: "Advertiser-level, placement-level, and format-level visibility." },
    { tag: "ON-TIME PAYMENTS", title: "Predictable payouts", body: "Clear payment terms and reliable payout cycles, with faster options available for qualified publishers.", detail: "Net-30 standard · faster terms available for Tier-1 publishers." },
    { tag: "STABLE REVENUE", title: "More stable demand", body: "Longer-term advertiser relationships help reduce revenue volatility and support more consistent fill over time.", detail: "Direct deals + programmatic: two revenue layers, not one." },
  ];
  const types = [
    { title: "Content Publishers", body: "Blogs, editorial sites, and content platforms that want to monetize without compromising user experience or editorial standards.", points: ["Display & native ads","Brand-safe demand","Easy integration"] },
    { title: "App Developers", body: "Mobile and app publishers who need monetization that fits the product experience and protects retention.", points: ["SDK integration","Rewarded ads","Interstitial formats"] },
    { title: "Media Networks", body: "Multi-site publishers managing diverse inventory who need centralized demand, reporting, and control.", points: ["Multi-site management","Unified dashboard","API access"] },
  ];
  const steps = [
    { title: "Apply & get approved", body: "Submit your site or app for review. Most publishers receive a decision within 48 hours." },
    { title: "Integrate", body: "Add our tag or SDK and configure the formats you want to run. Technical support is available when needed." },
    { title: "Start earning", body: "Once integrated, demand can begin serving quickly, with performance visible in your dashboard." },
    { title: "Get paid", body: "Net-30 payments via wire or PayPal. Minimum threshold: $100." },
  ];
  const groups = [
    { title: "Monetization", items: ["Display, native, video formats","Performance-based pricing","Header bidding support","Direct deal access"] },
    { title: "Control", items: ["Block specific advertisers","Category-level filtering","Geo-targeting controls","Frequency capping"] },
    { title: "Protection", items: ["Brand safety scanning","Malware detection","Ad quality review","Invalid traffic filtering"] },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · For Publishers"
        title="Monetize your inventory."
        italic="Stay in control."
        lead="Access vetted demand, transparent reporting, and predictable payouts without compromising your brand or user experience."
        primary={{label:"Apply as publisher", href:"contact"}}
        secondary={{label:"See how it works", href:"platform-how-it-works"}}
        signals={[["48h","Approval decisions"],["Net-30","Standard payout"],["$100","Minimum threshold"],["Vetted","Demand only"]]}
        aside={<PublisherYield/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Publisher challenges" title="Monetization shouldn't come" italic="with trade-offs." lead="Most supply partners ask publishers to choose between revenue and control. We don't think that's a trade worth making." />
          <ProblemResolution
            problem={{
              eyebrow: "THE TYPICAL TRADE-OFFS",
              title: "What publishers usually face.",
              points: [
                "Low-quality ads that hurt your brand and user experience",
                "Payment delays or unclear payout terms",
                "Limited visibility into who is buying your inventory",
                "Revenue volatility without a clear explanation",
              ]
            }}
            resolution={{
              eyebrow: "WITH AUCTERA",
              title: "Quality demand. Transparent operations.",
              points: [
                "Advertisers vetted before activation",
                "Predictable payments with clear terms",
                "Reporting on buyers, rates, and performance",
                "More stable fill from long-term demand relationships",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Why publishers choose Auctera" title="Quality demand." italic="Transparent operations." lead="Monetize without compromising brand safety, user experience, or visibility." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Publishers we work with" title="Built for how" italic="publishers actually work." />
          <StageCards stages={types}/>
        </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)"}}>Getting started</div>
            <h2 className="display-2" style={{color:"var(--paper)"}}>Four steps <span className="h-italic" style={{color:"var(--ochre)"}}>from apply to paid.</span></h2>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:0, border:"1px solid rgba(246,242,236,0.15)", borderRadius:18, overflow:"hidden", background:"rgba(246,242,236,0.02)"}}>
            {steps.map((s,i)=>(
              <div key={i} style={{padding:"clamp(28px,3vw,44px)", borderRight: i < 3 ? "1px solid rgba(246,242,236,0.1)" : "none"}}>
                <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:42, color:"var(--ochre)", lineHeight:1, marginBottom:18}}>0{i+1}</div>
                <h4 style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--paper)", margin:"0 0 10px", lineHeight:1.2}}>{s.title}</h4>
                <p style={{color:"rgba(246,242,236,0.6)", fontSize:14.5, margin:0, lineHeight:1.55}}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Core publisher features" title="Monetize. Control. Protect." lead="Three feature groups working together, not bolted-on tooling from different vendors." />
          <FeatureGroups groups={groups}/>
        </div>
      </section>

      <FinalCTASection
        title="Ready to"
        italic="monetize smarter?"
        body="Apply to join Auctera and see how vetted demand, transparent reporting, and predictable payouts can improve monetization without compromising on what matters."
        primary={{label:"Apply as publisher", href:"contact"}}
        secondary={{label:"View case studies", href:"#"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);