/* Shared case-study shell: used by every case study detail page.
   Pass `meta` (header), `kpis` (3 hero metrics), `overview` (industry/goal/capabilities),
   `toc`, `art` (an illustration component), `children` (prose body). */

function CaseStudy({ meta, kpis, overview, toc, art, children, related }) {
  useReveal();
  return (
    <>
      <Header basePath="../" />

      {/* Hero */}
      <section className="article-hero" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="reveal" style={{ marginBottom: 28 }}>
            <span className="article-tag" style={{ display: "inline-flex" }}>
              <span className="tag-dot" />
              {meta.industry}
            </span>
          </div>
          <h1 className="display-2 reveal" style={{ maxWidth: "22ch", marginBottom: 28 }}>
            {meta.title}
            {meta.italic && (
              <>
                {" "}
                <span className="h-italic">{meta.italic}</span>
              </>
            )}
          </h1>
          <p className="lead reveal" style={{ maxWidth: "62ch", marginBottom: 48 }}>
            {meta.lead}
          </p>
        </div>
      </section>

      {/* KPI strip + art panel */}
      <section className="section" style={{ paddingTop: "clamp(40px, 4vw, 64px)" }}>
        <div className="container">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
            <div className="cs-art-panel">
              <span className="cs-art-tag">◆ {meta.industry.toUpperCase()} · OUTCOME</span>
              <span className="cs-art-id">CASE / {meta.code}</span>
              {art}
            </div>
            <div className="case-kpi-strip">
              {kpis.map((k, i) => (
                <div className="kpi-cell" key={i}>
                  <span className="kpi-eyebrow">{k.eyebrow}</span>
                  <span className="kpi-num" dangerouslySetInnerHTML={{ __html: k.value }} />
                  <span className="kpi-label">{k.label}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Overview meta */}
          <div className="case-overview reveal">
            <div>
              <div className="eyebrow eyebrow-dot" style={{ marginBottom: 14 }}>
                Overview
              </div>
              <h2 className="display-3" style={{ margin: "0 0 20px", maxWidth: "20ch" }}>
                {overview.headline}{" "}
                {overview.italic && <span className="h-italic">{overview.italic}</span>}
              </h2>
              <p className="lead" style={{ maxWidth: "60ch", margin: 0 }}>
                {overview.body}
              </p>
            </div>
            <div className="co-meta">
              <div className="row">
                <span className="label">Industry</span>
                <span className="val">{meta.industry}</span>
              </div>
              <div className="row">
                <span className="label">Client</span>
                <span className="val">{meta.client}</span>
              </div>
              <div className="row">
                <span className="label">Primary goal</span>
                <span className="val">{meta.goal}</span>
              </div>
              <div className="row">
                <span className="label">Capabilities used</span>
                <div className="chips">
                  {meta.capabilities.map((c, i) => (
                    <span className="chip" key={i}>
                      {c}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Body */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="case-body">
            <article className="prose">{children}</article>
            <aside className="case-toc-col">
              <nav className="article-toc reveal">
                <div className="toc-eyebrow">In this case</div>
                <ol>
                  {toc.map((t, i) => (
                    <li key={i}>
                      <a href={`#${t.id}`}>{t.label}</a>
                    </li>
                  ))}
                </ol>
              </nav>
            </aside>
          </div>
        </div>
      </section>

      {/* Related */}
      {related && related.length > 0 && (
        <section className="section-tight" style={{ paddingBottom: "clamp(72px, 10vw, 140px)" }}>
          <div className="container">
            <div style={{ marginBottom: 32 }} className="reveal">
              <div className="eyebrow eyebrow-dot" style={{ marginBottom: 14 }}>
                More Proof
              </div>
              <h3 className="display-3" style={{ margin: 0 }}>
                Related <span className="h-italic">case studies.</span>
              </h3>
            </div>
            <div className="article-related reveal-stagger">
              {related.map((r, i) => (
                <a key={i} href={r.href}>
                  <span className="ra-cat">{r.category}</span>
                  <span className="ra-title">{r.title}</span>
                  <span className="ra-meta">{r.metric} · Read →</span>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* CTA */}
      <FinalCTASection
        title="Ready to scale with"
        italic="more control?"
        body="Talk to our team about how Auctera connects DSP, affiliate, retargeting, measurement, and brand safety into one operating view: so every channel finally agrees on what's working."
        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="../" />
    </>
  );
}

/* Helpers */
function CSH2({ id, children }) {
  return <h2 id={id}>{children}</h2>;
}
function CSQuote({ eyebrow = "Why it matters", children }) {
  return (
    <div className="case-quote">
      <div className="cq-eyebrow">◆ {eyebrow}</div>
      <p>{children}</p>
    </div>
  );
}
/* Internal link helper, mirroring blog L() */
function CSL({ to, children }) {
  const mapped = to
    .replace(/^\//, "")
    .replace(/^([^/]+)\/(.+)$/, (m, a, b) => `${a}-${b}.html`)
    .replace(/\//g, "-");
  return <a href={mapped}>{children}</a>;
}

Object.assign(window, { CaseStudy, CSH2, CSQuote, CSL });