function Page() {
  useReveal();

  const featured = {
    href: "case-d2c-fashion-roas",
    industry: "D2C Fashion",
    title: "How a D2C fashion brand scaled customer",
    italic: "acquisition by 300%.",
    summary:
      "A D2C fashion e-commerce brand used Auctera to turn fragmented campaign activity into a coordinated acquisition engine across DSP, retargeting, and measurement.",
    kpis: [
      { val: "3.2×", label: "ROAS improvement" },
      { val: "+300%", label: "Customer acquisition" },
      { val: "−45%", label: "CAC reduction" },
    ],
  };

  const cases = [
    {
      href: "case-fintech-app-installs",
      industry: "Fintech",
      title: "How a fintech app drove 500K+ high-quality installs",
      summary:
        "Programmatic acquisition with stronger audience targeting, attribution, and fraud prevention: install volume scaled while CPI improved.",
      capabilities: ["Programmatic", "DSP", "Audience Targeting", "Fraud Prevention"],
      headline: "500K+",
      sub: "High-quality installs · −35% CPI",
      Art: ProgrammaticInstallArt,
    },
    {
      href: "case-b2b-saas-mrr",
      industry: "B2B SaaS",
      title: "How a B2B SaaS company generated $2.1M in new MRR",
      summary:
        "Targeted affiliate campaigns built around partner quality, offer structure, and revenue-aligned measurement, not just signup volume.",
      capabilities: ["Affiliate Network", "Offer Management", "Audience Targeting", "Measurement"],
      headline: "$2.1M",
      sub: "New MRR · 5,000+ qualified signups",
      Art: AffiliateMrrArt,
    },
    {
      href: "case-edtech-lower-cpa",
      industry: "EdTech",
      title: "How an EdTech platform cut acquisition costs by 68%",
      summary:
        "An online learning platform connected audience targeting, offer structure, conversion optimization, and reporting into a more efficient enrollment system.",
      capabilities: ["Customer Acquisition", "Conversion Optimization", "Offer Management", "Reporting"],
      headline: "−68%",
      sub: "CPA reduction · scaled enrollments",
      Art: CpaReductionArt,
    },
    {
      href: "case-d2c-fashion-roas",
      industry: "D2C Fashion",
      title: "How a D2C fashion brand scaled customer acquisition by 300%",
      summary:
        "Audience targeting, retargeting, and measurement working together to scale acquisition while reducing CAC across e-commerce campaigns.",
      capabilities: ["Customer Acquisition", "DSP", "Retargeting Cloud", "Audience Targeting"],
      headline: "3.2×",
      sub: "ROAS · −45% CAC · +300% acquisition",
      Art: RoasGrowthArt,
    },
  ];

  return (
    <>
      <Header basePath="./" />

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <div className="crumb reveal" style={{ marginBottom: 32 }}>
            <a href="../">Auctera</a>
            <span>›</span>
            <span>Case Studies</span>
          </div>
          <div className="reveal" style={{ marginBottom: 18 }}>
            <span className="eyebrow eyebrow-dot">Proof, not promises</span>
          </div>
          <h1
            className="display-2 reveal"
            style={{ marginTop: 0, marginBottom: 32, maxWidth: "22ch" }}
          >
            What happens when performance marketing finally agrees on{" "}
            <span className="h-italic">what's working.</span>
          </h1>
          <p className="lead reveal" style={{ maxWidth: "62ch", marginBottom: 0 }}>
            Real outcomes from teams that connected DSP, affiliate, retargeting, measurement, and
            brand safety into one operating system. Lower CPA, higher ROAS, qualified signups, and
            install quality you can actually defend.
          </p>

          <div className="case-index-stats reveal">
            <div className="stat">
              <span className="num"><em>3.2×</em></span>
              <span className="lbl">ROAS improvement · D2C fashion</span>
            </div>
            <div className="stat">
              <span className="num"><em>−68%</em></span>
              <span className="lbl">CPA reduction · EdTech</span>
            </div>
            <div className="stat">
              <span className="num"><em>$2.1M</em></span>
              <span className="lbl">New MRR · B2B SaaS</span>
            </div>
            <div className="stat">
              <span className="num"><em>500K+</em></span>
              <span className="lbl">Installs · Fintech app</span>
            </div>
          </div>
        </div>
      </section>

      {/* Featured */}
      <section className="section">
        <div className="container">
          <div className="mono reveal" style={{ marginBottom: 24, color: "var(--ochre-deep)" }}>
            ◆ FEATURED CASE
          </div>
          <a href={featured.href} className="case-feature reveal">
            <div className="cf-art">
              <span className="cs-art-tag">D2C FASHION · OUTCOME</span>
              <span className="cs-art-id">CASE / 04</span>
              <RoasGrowthArt />
            </div>
            <div className="cf-body">
              <span className="article-tag" style={{ display: "inline-flex" }}>
                <span className="tag-dot" />
                {featured.industry}
              </span>
              <h2 className="display-2" style={{ margin: 0 }}>
                {featured.title} <span className="h-italic">{featured.italic}</span>
              </h2>
              <p className="lead" style={{ margin: 0, maxWidth: "48ch" }}>
                {featured.summary}
              </p>
              <div className="kpi-row">
                {featured.kpis.map((k, i) => (
                  <span className="kpi-pill" key={i}>
                    <strong>{k.val}</strong>
                    {k.label}
                  </span>
                ))}
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 12,
                  marginTop: 12,
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  color: "var(--ink)",
                }}
              >
                Read full case <Arrow />
              </div>
            </div>
          </a>
        </div>
      </section>

      {/* All cases grid */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div
            className="reveal"
            style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}
          >
            <h3 className="display-3" style={{ margin: 0 }}>
              All <span className="h-italic">case studies.</span>
            </h3>
            <span className="mono" style={{ color: "var(--muted-2)" }}>
              {String(cases.length).padStart(2, "0")} CASES
            </span>
          </div>
          <div className="case-grid reveal-stagger">
            {cases.map((c, i) => {
              const Art = c.Art;
              return (
                <a key={i} href={c.href} className="case-card">
                  <div className="cc-art">
                    <span className="cs-art-tag">{c.industry.toUpperCase()}</span>
                    <span className="cs-art-id">CASE / {String(i + 1).padStart(2, "0")}</span>
                    <Art />
                  </div>
                  <div className="cc-body">
                    <div className="cc-meta">
                      <span className="cc-chip">{c.industry}</span>
                    </div>
                    <h4>{c.title}</h4>
                    <p className="cc-summary">{c.summary}</p>
                    <div className="cap-tags">
                      {c.capabilities.map((cap, j) => (
                        <span key={j} className="cap-tag">
                          {cap}
                        </span>
                      ))}
                    </div>
                    <div className="cc-headline">
                      {c.headline}
                      <span>{c.sub}</span>
                    </div>
                    <div className="cc-cta">
                      Read case <Arrow />
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <FinalCTASection
        title="Want a case study built on"
        italic="your numbers?"
        body="Talk to our team about how Auctera connects DSP, affiliate, retargeting, measurement, and brand safety into one operating view, and what that could look like for your acquisition stack."
        primary={{ label: "Talk to sales", href: "contact" }}
        secondary={{ label: "Explore the platform", href: "platform-overview" }}
        micro="ENTERPRISE-READY · GDPR · SOC 2 TYPE II"
      />

      <Footer basePath="./" />
    </>
  );
}


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