function YieldCalculator() {
  const [spend, setSpend] = React.useState(50000);
  const [industry, setIndustry] = React.useState('ecommerce');

  const industryData = {
    ecommerce: { name: "E-Commerce", fraud: 0.08, lift: 15 },
    saas: { name: "B2B SaaS", fraud: 0.05, lift: 12 },
    fintech: { name: "Fintech", fraud: 0.12, lift: 22 },
    leadgen: { name: "Lead Generation", fraud: 0.15, lift: 25 },
  };

  const data = industryData[industry];
  const foundBudget = spend * data.fraud;

  return (
    <div className="yield-calc reveal" style={{background: "var(--ink)", borderRadius: "24px", padding: "clamp(32px, 5vw, 64px)", color: "var(--paper)", boxShadow: "0 24px 48px rgba(0,0,0,0.12)"}}>
      <div className="grid" style={{gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "48px"}}>
        
        {/* Controls */}
        <div>
          <div className="eyebrow eyebrow-dot" style={{color: "rgba(246,242,236,0.6)", marginBottom: "24px"}}>Interactive Tool</div>
          <h3 className="display-3" style={{color: "var(--paper)", marginBottom: "12px", fontSize: "32px"}}>Projected Yield</h3>
          <p style={{color: "rgba(246,242,236,0.7)", marginBottom: "40px", lineHeight: 1.6}}>Calculate how much wasted budget you can recover by switching to Auctera's pre-bid fraud filtering and unified attribution.</p>
          
          <div style={{marginBottom: "32px"}}>
            <label style={{display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: "12px", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "16px"}}>
              <span style={{color: "rgba(246,242,236,0.6)"}}>Monthly Ad Spend</span>
              <span style={{color: "var(--ochre)", fontWeight: "bold"}}>${spend.toLocaleString()}</span>
            </label>
            <input 
              type="range" 
              min="10000" max="500000" step="5000" 
              value={spend} 
              onChange={(e) => setSpend(Number(e.target.value))}
              style={{width: "100%", accentColor: "var(--ochre)", cursor: "pointer"}}
            />
          </div>

          <div>
            <label style={{display: "block", fontFamily: "var(--font-mono)", fontSize: "12px", textTransform: "uppercase", letterSpacing: "0.1em", color: "rgba(246,242,236,0.6)", marginBottom: "16px"}}>Industry</label>
            <div style={{display: "flex", flexWrap: "wrap", gap: "10px"}}>
              {Object.entries(industryData).map(([key, val]) => (
                <button 
                  key={key}
                  onClick={() => setIndustry(key)}
                  style={{
                    padding: "10px 16px", borderRadius: "8px", border: "1px solid",
                    borderColor: industry === key ? "var(--ochre)" : "rgba(246,242,236,0.2)",
                    background: industry === key ? "rgba(182,143,64,0.1)" : "transparent",
                    color: industry === key ? "var(--ochre)" : "rgba(246,242,236,0.8)",
                    fontFamily: "var(--font-ui)", fontSize: "14px", cursor: "pointer", transition: "all 0.2s ease"
                  }}
                >
                  {val.name}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Results */}
        <div style={{background: "var(--paper-2)", borderRadius: "16px", padding: "40px", color: "var(--ink)", display: "flex", flexDirection: "column", justifyContent: "center"}}>
          <div style={{marginBottom: "32px"}}>
            <div style={{fontFamily: "var(--font-mono)", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--muted)", marginBottom: "8px"}}>Estimated Fraud Savings (Recovered Budget)</div>
            <div style={{fontFamily: "var(--font-display)", fontSize: "56px", color: "var(--ink)", lineHeight: 1}}>${foundBudget.toLocaleString()}</div>
            <div style={{fontFamily: "var(--font-ui)", fontSize: "14px", color: "var(--ink-2)", marginTop: "8px"}}>That's <strong>{data.fraud * 100}%</strong> of your spend currently wasted on IVT.</div>
          </div>
          
          <div style={{paddingTop: "32px", borderTop: "1px solid var(--line)"}}>
            <div style={{fontFamily: "var(--font-mono)", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--muted)", marginBottom: "8px"}}>Projected CPA Improvement</div>
            <div style={{fontFamily: "var(--font-display)", fontSize: "40px", color: "var(--ochre)", lineHeight: 1}}>+{data.lift}%</div>
            <div style={{fontFamily: "var(--font-ui)", fontSize: "14px", color: "var(--ink-2)", marginTop: "8px"}}>Driven by unified attribution and transparent bidding.</div>
          </div>
          
          <div style={{marginTop: "40px"}}>
            <a href="contact" className="btn" style={{width: "100%", justifyContent: "center"}}>Claim Recovered Budget</a>
          </div>
        </div>
        
      </div>
    </div>
  )
}

function Page() {
  const capabilities = [
    { tag: "UNIFIED EXECUTION", title: "One platform, all channels", body: "Run DSP, affiliate, and retargeting from a single dashboard. No switching tools, no reconciling conflicting data.", detail: "DSP · Affiliate · Retargeting · Reporting: shared audience graph." },
    { tag: "FULL-FUNNEL ATTRIBUTION", title: "See what drove the sale", body: "Multi-touch attribution shows the full customer journey. Know which channels and partners actually contribute to conversion.", detail: "Linear · time-decay · position-based · data-driven models." },
    { tag: "PRE-BID PROTECTION", title: "Block fraud before it bills", body: "Detect suspicious traffic patterns in real time. Reduce wasted spend before it reaches your budget.", detail: "< 0.5% IVT rate on filtered inventory." },
    { tag: "CONTROLLED GROWTH", title: "Scale without losing control", body: "Grow spend confidently. Automated optimization keeps ROAS stable as you expand to new channels and markets.", detail: "Budget pacing, target-CPA guardrails, anomaly alerts." },
  ];
  const stages = [
    { title: "Growing Brands", body: "You're ready to move beyond basic ad platforms and need unified tracking and better attribution as you scale.", points: ["Self-serve dashboard","Flexible starting budgets","Onboarding support included"] },
    { title: "Mid-Market Teams", body: "Managing multiple channels and need one source of truth across spend, performance, and attribution.", points: ["Dedicated account manager","Custom integrations","Training included"] },
    { title: "Enterprise Operations", body: "High-volume performance marketing with complex attribution needs. Require API access and custom reporting.", points: ["Full API access","Custom SLAs","Strategic partnership"] },
  ];
  const steps = [
    { title: "Connect your data", body: "Install tracking, connect your product feed, and import existing audiences." },
    { title: "Set your goals", body: "Define target CPA or ROAS. Tell us what a conversion is worth. We optimize toward what matters." },
    { title: "Launch across channels", body: "Activate campaigns across DSP, affiliates, and retargeting simultaneously. One setup, multiple channels." },
    { title: "Optimize & scale", body: "Watch real-time attribution data. Cut what doesn't work. Scale what does. Repeat." },
  ];
  const groups = [
    { title: "Unified platform", items: ["DSP with transparent bidding","Affiliate network access","Cross-device retargeting","Single reporting dashboard"] },
    { title: "Performance tools", items: ["Multi-touch attribution","Incrementality testing","Dynamic creative optimization","Automated bid management"] },
    { title: "Protection & control", items: ["Real-time fraud detection","Brand safety controls","Publisher quality scoring","Budget pacing & caps"] },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · For Advertisers"
        title="Scale customer acquisition."
        italic="See what drives revenue."
        lead="Run DSP, affiliate, and retargeting campaigns from one platform: with clearer attribution, stronger traffic-quality controls, and performance you can actually scale."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See how it works", href:"platform-how-it-works"}}
        signals={[["3 in 1","DSP · Affiliate · Retargeting"],["Multi-touch","Unified attribution"],["<0.5%","IVT on filtered inventory"],["Scale","Without fragmenting"]]}
        aside={<AcquisitionEngine/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The problem" title="Performance marketing" italic="got fragmented." lead="Separate platforms for DSP, affiliates, and retargeting. Different dashboards report different numbers. No clear picture of what's actually driving conversions." />
          <ProblemResolution
            problem={{
              eyebrow: "WHAT YOU'RE DEALING WITH",
              title: "Fragmentation is expensive.",
              points: [
                "Separate platforms for DSP, affiliates, and retargeting",
                "Different dashboards report different numbers",
                "No clear picture of what's actually driving conversions",
                "Invalid traffic drains budget before you catch it",
              ]
            }}
            resolution={{
              eyebrow: "HOW AUCTERA HELPS",
              title: "One platform. Full visibility.",
              points: [
                "DSP + affiliates + retargeting in one place",
                "Unified attribution across all touchpoints",
                "Clear view of the full customer journey",
                "Pre-bid traffic-quality controls help block invalid traffic",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="What you get" title="Real capabilities." italic="Launch, measure, scale." lead="The tools performance marketers actually use without the tax of running four vendors to do the work of one." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Built for your stage" title="From first scale" italic="to global footprint." lead="The platform adapts to your scale and support needs: whether you're spending $15K a month or $10M." />
          <StageCards stages={stages}/>
          
          <div style={{marginTop: "80px"}}>
            <YieldCalculator />
          </div>
        </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)"}}>How it works</div>
            <h2 className="display-2" style={{color:"var(--paper)"}}>Four steps <span className="h-italic" style={{color:"var(--ochre)"}}>to launch.</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 platform features" title="The toolbox." italic="Everything included." lead="No upsells, no upgrade tiers for the capabilities you need to actually run performance marketing." />
          <FeatureGroups groups={groups}/>
        </div>
      </section>

      <FinalCTASection
        title="Ready to see"
        italic="what's driving performance?"
        body="Get a walkthrough of the platform with your specific acquisition use case in mind. We'll show you unified attribution, traffic-quality controls, and cross-channel execution on real data, not a generic demo."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"View case studies", href:"#"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);