// CASE STUDY DETAIL
const { useState, useEffect, useRef } = React;
const { Link, MediaPh, useCountUp, CASES } = window;
const CaseGlyph = window.CaseGlyph;

function CaseStudy({ slug }) {
  const c = CASES.find(x => x.slug === slug);
  if (!c) return <window.NotFound />;
  return <CaseView c={c} />;
}

function CaseView({ c }) {
  return (
    <main className="page-enter">
      <CaseHero c={c} />
      <CaseFacts c={c} />
      <CaseBrief c={c} />
      <CaseProblem c={c} />
      <CaseProcess c={c} />
      <CaseCreative c={c} />
      <CaseMetricsBA c={c} />
      <CaseQuote c={c} />
      <CaseArtifacts c={c} />
      <CaseRelated c={c} />
    </main>
  );
}

function CaseHero({ c }) {
  return (
    <section style={{ paddingTop: 140, paddingBottom: 80 }}>
      <div className="page">
        <div className="flex items-center gap-3" style={{ marginBottom: 28 }}>
          <Link to="/work" className="mono ilink">↳ Réalisations</Link>
          <span className="mono" style={{ color: "var(--muted)" }}>·</span>
          <span className="mono" style={{ color: "var(--muted)" }}>{c.industry}</span>
        </div>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 16 }}>
          {c.client.toUpperCase()} × CLYVONNA · {c.year}
        </div>
        <h1 className="serif" style={{ fontSize: "clamp(56px, 8vw, 168px)", lineHeight: 0.92, letterSpacing: "-0.025em", maxWidth: "16ch" }}>
          {c.title}
        </h1>
        <div style={{ marginTop: 60 }}>
          <MediaPh ratio="21/9" accent={c.accent} label={`${c.client} · Sélection d'images`} tr={c.location}>
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <CaseGlyph slug={c.slug} accent={c.accent} />
            </div>
          </MediaPh>
        </div>
      </div>
    </section>
  );
}

function CaseFacts({ c }) {
  return (
    <section style={{ padding: "60px 0", background: "var(--cream-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24 }}>
        {[
          ["Client", c.client], ["Secteur", c.industry], ["Année", c.year],
          ["Durée", c.duration], ["Localisation", c.location], ["Pratiques", c.services.join(", ")],
        ].map(([k, v]) => (
          <div key={k}>
            <div className="lx-label" style={{ marginBottom: 8 }}>{k}</div>
            <div className="serif" style={{ fontSize: 20, lineHeight: 1.25 }}>{v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CaseBrief({ c }) {
  const brief = c.slug === "olvera"
    ? "« Nous sommes un torréfacteur de café d'origine unique, basé sur la côte ouest. Un excellent produit, un site correct et un programme marketing payant qui brûle activement notre trésorerie. Nous avons doublé deux fois par le bouche-à-oreille. Il nous reste neuf mois de runway. Aidez-nous à ne pas disparaître. »"
    : c.slug === "halden"
    ? "« Nous sommes une boutique de vélos à cadre acier, fondée il y a 30 ans en Europe du Nord. Nous sommes perçus comme un vélo artisanal pour les pères de famille cyclistes. Nous voulons devenir le vélo que les cyclistes les plus ambitieux d'Europe utilisent pour aller au bureau. Sans perdre les pères. »"
    : c.slug === "pierpoint"
    ? "« Notre conversion essai-vers-payant est correcte. Notre rétention est correcte. Notre expansion est inexistante. Les investisseurs commencent à le remarquer. Construisez-nous un dispositif de cycle de vie qui se finance lui-même. »"
    : "« Nous faisons la chose. Nous ne sommes pas encore reconnus pour cette chose. Corrigez le tir avant que la trésorerie ne s'épuise. »";
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "200px 1fr 200px", gap: 32 }}>
        <div className="mono" style={{ color: "var(--muted)" }}>↳ Le brief, mot pour mot</div>
        <p className="serif" style={{ fontSize: "clamp(28px, 3vw, 48px)", lineHeight: 1.18, letterSpacing: "-0.01em", textWrap: "pretty" }}>
          {brief}
        </p>
        <div></div>
      </div>
    </section>
  );
}

function CaseProblem({ c }) {
  const items = c.slug === "olvera" ? [
    "L'acquisition payante achetait le mauvais client. Le CAC atteignait 64 €, la LTV à 90 jours plafonnait à 43 €. Chaque euro investi sur Meta représentait un quart perdu.",
    "Marque solide en présentiel, faible en ligne. Huit ans d'évangélisation sur les salons avaient construit une base locale fidèle et une page d'accueil qui n'en traduisait presque rien.",
    "La mesure tenait davantage de l'aspiration que de la rigueur. Tableaux de bord approximatifs. Aucun test géo-lift. Aucun MMM. Décisions prises au feeling et sur un tableur partagé.",
  ] : c.slug === "halden" ? [
    "Marque adorée par les clients de longue date, invisible pour les nouveaux. Trafic en boutique stagnant depuis trois ans.",
    "Le budget de performance était orienté vers les mauvais marchés. L'Allemagne sur-représentée, le marché domestique sous-représenté.",
    "Aucun programme éditorial. Visibilité organique nulle sur toutes les requêtes qui comptaient.",
  ] : [
    "Le produit était plus mature que l'entreprise ne savait l'exprimer.",
    "Trois dispositifs de croissance en parallèle, aucun avec un responsable clair.",
    "Le reporting avait tellement de retard sur la réalité que l'équipe prenait en février des décisions basées sur les chiffres d'octobre.",
  ];
  return (
    <section style={{ padding: "100px 0", background: "var(--ink)", color: "var(--cream)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60 }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>01 · Le problème</div>
          <h2 className="serif" style={{ fontSize: "clamp(36px, 4.4vw, 72px)", lineHeight: 0.98, letterSpacing: "-0.02em", marginTop: 20, color: "var(--cream)" }}>
            Trois constats au premier jour.
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          {items.map((t, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16 }}>
              <span className="serif italic" style={{ color: "var(--acid)", fontSize: 36, lineHeight: 1 }}>{i+1}.</span>
              <p className="body-lg" style={{ color: "rgba(242,237,228,0.85)" }}>{t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseProcess({ c }) {
  const steps = [
    { w: "Semaine 1–2", t: "Diagnostic.", d: "Nous avons exploité trois ans de comptabilité, six mois de données médias payantes et sorti la fondatrice du bureau pendant deux jours. Nous avons réécrit le compte de résultat en marge contributive. L'image s'est clarifiée immédiatement." },
    { w: "Semaine 3–6", t: "Repositionnement.", d: "Nouveau brief : cesser de vendre du « grand café ». Vendre le rituel d'un meilleur samedi matin. Document de positionnement de cinq pages. Page d'accueil retravaillée. Nouveau territoire publicitaire conceptualisé en semaine quatre." },
    { w: "Semaine 6–10", t: "Système créatif.", d: "80 unités publicitaires par mois, trois territoires conceptuels simultanés, revues du vendredi. La photographie est passée en interne. Toutes les images d'archive ont été supprimées." },
    { w: "Semaine 10–14", t: "Cycle de vie, enfin.", d: "Bienvenue, panier abandonné, post-achat, win-back. Klaviyo connecté à l'entrepôt. Les abonnements repositionnés comme un club, non comme une remise." },
    { w: "Semaine 14–20", t: "Infrastructure de mesure.", d: "MMM en production dans la plateforme Clyvonna. Premier géo-lift en fin de trimestre. Nous avons cessé d'optimiser ce que nous ne pouvions pas vérifier. Et commencé à optimiser ce qui l'était." },
  ];
  return (
    <section style={{ padding: "140px 0" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">02 · Processus</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Ce que nous avons fait,<br/>semaine après semaine.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Les 90 premiers jours ont défini la cadence opérationnelle. Les 270 suivants l'ont consolidée.
          </p>
        </div>
      </div>
      <div className="page">
        {steps.map((s, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "180px 1fr 1.4fr", gap: 32, padding: "40px 0", borderTop: "1px solid var(--rule)" }}>
            <div>
              <div className="mono" style={{ color: "var(--muted)", marginBottom: 8 }}>{s.w}</div>
              <div className="mono" style={{ color: "var(--acid-deep)" }}>0{i+1} / 0{steps.length}</div>
            </div>
            <h3 className="serif" style={{ fontSize: 40, lineHeight: 1, letterSpacing: "-0.02em" }}>{s.t}</h3>
            <p className="body-lg" style={{ maxWidth: 620 }}>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CaseCreative({ c }) {
  return (
    <section style={{ background: "var(--cream-2)", padding: "140px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">03 · Système créatif</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Un aperçu<br/>du système créatif.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Trois territoires conceptuels, quatre-vingts unités publicitaires par mois, chaque vendredi testées face à la même question business.
          </p>
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        <AdCreative kind="ritual" title="Un samedi matin, en 30 grammes." sub="Origine unique, lait d'avoine, sans détour." price="24 €" />
        <AdCreative kind="origin" title="Yirgacheffe, 1 950 m." sub="Lavande, pêche, écorce d'agrume." price="26 €" />
        <AdCreative kind="club" title="Les membres du club ne sont jamais à court." sub="Abonnez-vous. Mettez en pause à tout moment." price="—" />
      </div>
      <div className="page" style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
        <AdCreative kind="wide" title="Fait par des mains que vous pouvez serrer." sub="Torréfié chaque mercredi, en atelier." price="" wide />
        <AdCreative kind="quote" title='« Le meilleur café que j'ai préparé dans cette maison depuis que je l'ai achetée. »' sub="— un avis réel, en 2025" price="" wide quote />
      </div>
      <div className="page" style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 32, alignItems: "start" }}>
        <div className="lx-label">↳ Revue de concepts · vendredi 12/09</div>
        <p className="serif italic" style={{ fontSize: 24, lineHeight: 1.35, maxWidth: 760 }}>
          « Nous avons écarté le concept « pour-over hero » après deux semaines. Il fonctionnait bien visuellement et refusait de convertir. Le client a toujours été meilleur pour dire la vérité que pour habiller le sachet. »
        </p>
      </div>
    </section>
  );
}

function AdCreative({ kind, title, sub, price, wide = false, quote = false }) {
  const palettes = {
    ritual: { bg: "var(--cream)", fg: "var(--ink)", chip: "var(--ox)", chipFg: "var(--cream)" },
    origin: { bg: "var(--ox)", fg: "var(--cream)", chip: "var(--acid)", chipFg: "var(--ink)" },
    club:   { bg: "var(--ink)", fg: "var(--cream)", chip: "var(--acid)", chipFg: "var(--ink)" },
    wide:   { bg: "var(--acid)", fg: "var(--ink)", chip: "var(--ink)", chipFg: "var(--cream)" },
    quote:  { bg: "var(--cream)", fg: "var(--ink)", chip: "var(--ox)", chipFg: "var(--cream)" },
  };
  const p = palettes[kind];
  return (
    <div style={{ aspectRatio: wide ? "16/9" : "4/5", background: p.bg, color: p.fg, padding: 32, position: "relative", overflow: "hidden", border: "1px solid var(--rule)" }}>
      <div className="mono" style={{ color: p.fg, opacity: 0.7, fontSize: 10 }}>TORRÉFACTEUR · {kind.toUpperCase()} · v.07</div>
      <div style={{ position: "absolute", inset: "60px 32px 32px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div style={{ maxWidth: "92%" }}>
          {quote
            ? <p className="serif italic" style={{ fontSize: 32, lineHeight: 1.15, letterSpacing: "-0.01em" }}>{title}</p>
            : <h3 className="serif" style={{ fontSize: wide ? 56 : 40, lineHeight: 1.0, letterSpacing: "-0.02em" }}>{title}</h3>
          }
          <p className="body" style={{ marginTop: 14, color: p.fg, opacity: 0.85, maxWidth: 400 }}>{sub}</p>
        </div>
        <div className="flex items-center justify-between" style={{ marginTop: 24 }}>
          <span className="mono" style={{ fontSize: 10, opacity: 0.7 }}>torrefacteur.fr</span>
          {price && (
            <span style={{ background: p.chip, color: p.chipFg, padding: "6px 14px", borderRadius: 999, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em" }}>
              ACHETER · {price}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}

function CaseMetricsBA({ c }) {
  return (
    <section style={{ padding: "140px 0" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">04 · Résultats</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Ce qui a évolué.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Indicateurs audités par l'équipe finance du client. Nous ne publions aucun chiffre que nous n'avons pas, conjointement, validé.
          </p>
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {c.metrics.map((m, i) => <MetricBA key={i} m={m} />)}
      </div>
    </section>
  );
}

function MetricBA({ m }) {
  const [vAfter, refA] = useCountUp(m.after, { duration: 1800, decimals: m.after < 10 ? 1 : 0, prefix: m.prefix || "", suffix: m.suffix || "" });
  const beforeFmt = (m.prefix || "") + (m.before < 10 ? m.before.toFixed(1) : Math.round(m.before).toLocaleString()) + (m.suffix || "");
  return (
    <div className="card" style={{ background: "var(--cream-2)", padding: 32, borderColor: "var(--rule)" }}>
      <div className="lx-label" style={{ marginBottom: 18 }}>{m.label}</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 24px 1fr", gap: 16, alignItems: "center" }}>
        <div>
          <div className="mono" style={{ color: "var(--muted)", marginBottom: 6 }}>Avant</div>
          <div className="serif ticker" style={{ fontSize: 44, color: "var(--muted)", lineHeight: 1 }}>
            {beforeFmt}
          </div>
        </div>
        <div className="serif" style={{ fontSize: 32, color: "var(--acid-deep)", textAlign: "center" }}>→</div>
        <div ref={refA}>
          <div className="mono" style={{ color: "var(--ink)", marginBottom: 6 }}>Après</div>
          <div className="serif ticker" style={{ fontSize: 60, lineHeight: 1, letterSpacing: "-0.02em" }}>{vAfter}</div>
        </div>
      </div>
    </div>
  );
}

function CaseQuote({ c }) {
  return (
    <section style={{ background: "var(--cream-2)", padding: "120px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 5fr 1fr", gap: 32 }}>
        <div></div>
        <div>
          <span className="serif" style={{ fontSize: 120, color: "var(--acid-deep)", lineHeight: 0.7, display: "inline-block" }}>«</span>
          <p className="serif" style={{ fontSize: "clamp(36px, 4.4vw, 76px)", lineHeight: 1.1, letterSpacing: "-0.01em", marginTop: -20, textWrap: "pretty" }}>
            {c.quote}
          </p>
          <div className="mono" style={{ marginTop: 32, color: "var(--muted)" }}>↳ {c.quoteAttr}</div>
        </div>
        <div></div>
      </div>
    </section>
  );
}

function CaseArtifacts({ c }) {
  return (
    <section style={{ padding: "140px 0" }}>
      <div className="page" style={{ marginBottom: 40 }}>
        <div className="eyebrow-num">05 · Artéfacts du processus</div>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
          Briefs, esquisses,<br/>et le chemin long.
        </h2>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 24 }}>
        <BriefDoc c={c} />
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <MediaPh ratio="1/1" accent="ink" label="Esquisses · semaine 3" tr="A. Sosa">
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="60%" viewBox="0 0 100 100" fill="none">
                <path d="M20 80 C30 40, 70 40, 80 80" stroke="var(--cream)" strokeWidth="0.5" fill="none" />
                <circle cx="50" cy="55" r="8" stroke="var(--cream)" strokeWidth="0.5" fill="none" />
                <path d="M50 47 Q56 35, 50 30" stroke="var(--cream)" strokeWidth="0.5" fill="none" />
              </svg>
            </div>
          </MediaPh>
          <MediaPh ratio="1/1" accent="acid" label="Étude packaging · v.03" tr="TORRÉFACTEUR × CL" />
        </div>
      </div>
      <div className="page" style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
        <MediaPh ratio="4/3" accent="ox" label="Devanture — Atelier" tr="OCT. 2024" />
        <MediaPh ratio="4/3" accent="cobalt" label="Studio shoot · jour 02" tr="P. Quesada">
          <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <span className="serif italic" style={{ fontSize: 88, color: "var(--cream)" }}>2.</span>
          </div>
        </MediaPh>
        <MediaPh ratio="4/3" accent="cream" label="Nouvelle page d'accueil · v.04" tr="EN LIGNE 11/2024">
          <div style={{ position: "absolute", inset: 0, padding: 20 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
              <span className="serif" style={{ fontSize: 18 }}>torréfacteur.</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>BOUTIQUE · ORIGINES · À PROPOS</span>
            </div>
            <div className="serif" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing: "-0.01em" }}>
              Un café pour le<br/>genre de samedi<br/>que vous attendez vraiment.
            </div>
          </div>
        </MediaPh>
      </div>
    </section>
  );
}

function BriefDoc({ c }) {
  return (
    <div style={{ background: "var(--cream)", padding: 40, border: "1px solid var(--rule)" }}>
      <div className="flex justify-between items-center" style={{ marginBottom: 24, paddingBottom: 16, borderBottom: "1px solid var(--rule)" }}>
        <div className="mono" style={{ color: "var(--muted)" }}>↳ Brief d'une page · semaine 02</div>
        <div className="mono" style={{ color: "var(--muted)" }}>TORRÉFACTEUR / CLYVONNA · 03.2024</div>
      </div>
      <div className="kvp"><div className="k">Pour qui</div><div className="v">Les personnes qui préparent déjà leur café à la maison et en ont assez qu'on leur explique qu'elles s'y prennent mal.</div></div>
      <div className="kvp"><div className="k">Ce que nous disons</div><div className="v">Un café fait par des mains que vous pouvez serrer, pour le genre de samedi que vous attendez vraiment.</div></div>
      <div className="kvp"><div className="k">Ton</div><div className="v">Simple, chaleureux, légèrement affirmé. La voix du torréfacteur, pas celle du service marketing.</div></div>
      <div className="kvp"><div className="k">Ce que nous évitons</div><div className="v">Le jargon de spécialité. Les visuels d'archive. « Primé. » « Fait main. » « Artisanal. »</div></div>
      <div className="kvp"><div className="k">Mix canal</div><div className="v">Meta (40 %), TikTok (15 %), Google (20 %), Klaviyo (canal propriétaire), affichage programmatique dans 3 métropoles (25 %).</div></div>
      <div className="kvp"><div className="k">Pari</div><div className="v">Les abonnements ne sont pas un mécanisme de remise. C'est un club. Tarifez le club, pas le café.</div></div>
      <div className="kvp"><div className="k">Si cela fonctionne</div><div className="v">CAC inférieur à 30 €. Taux de réachat supérieur à 35 %. 2 M€ de chiffre trimestriel au mois 14. (Constaté : environ 28 €, 41 %, 2,4 M€.)</div></div>
      <div style={{ marginTop: 24, padding: 18, background: "var(--cream-2)", borderLeft: "3px solid var(--acid)" }}>
        <div className="lx-label" style={{ marginBottom: 6 }}>Notes manuscrites de la fondatrice</div>
        <p className="serif italic" style={{ fontSize: 22 }}>« Oui à tout sauf aux trois métropoles d'affichage — on en garde deux. Le runway ne permet pas la troisième. » — M.S.</p>
      </div>
    </div>
  );
}

function CaseRelated({ c }) {
  const others = CASES.filter(x => x.slug !== c.slug).slice(0, 3);
  return (
    <section style={{ background: "var(--ink)", color: "var(--cream)", padding: "120px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 48 }}>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em", color: "var(--cream)" }}>
          Lire un autre cas.<em style={{ color: "var(--acid)" }}>—</em>
        </h2>
        <Link to="/work" className="mono ilink" style={{ justifySelf: "end" }}>↳ Tous les cas clients</Link>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {others.map(o => (
          <Link key={o.slug} to={`/work/${o.slug}`} className="img-hover">
            <MediaPh ratio="4/3" accent={o.accent} label={o.client} tr={o.year}>
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <CaseGlyph slug={o.slug} accent={o.accent} />
              </div>
            </MediaPh>
            <h3 className="serif" style={{ fontSize: 24, marginTop: 16, lineHeight: 1.15, color: "var(--cream)" }}>{o.title}</h3>
            <div className="mono" style={{ color: "rgba(242,237,228,0.6)", marginTop: 8 }}>↳ {o.industry}</div>
          </Link>
        ))}
      </div>
    </section>
  );
}

function CaseGeneric({ c }) { return <CaseView c={c} />; }

window.CaseStudy = CaseStudy;