// CaseStudyContent.jsx — full case study page driven by ?id= query param
const CASE_STUDIES = {
  "miumiu": {
    label: "phénomène",
    client: "Miu Miu",
    title: "Miu Miu Institute — l'art comme récit de marque",
    kind: "Plateforme · Mode",
    year: "2025",
    duration: "6 mois",
    services: ["Plateforme de marque", "Direction artistique", "Édition", "Social media"],
    hero: "assets/photo-miumiu-show.png",
    intro: "Quand une maison de mode décide d'investir le terrain de la pensée, elle ne peut pas se contenter d'une campagne. Elle a besoin d'une grammaire. Pour Miu Miu Institute, nous avons construit un récit éditorial où la mode dialogue avec la littérature et l'histoire de l'art — sans jamais perdre la précision visuelle du studio.",
    body: [
      ["Le contexte", "La marque voulait dépasser le format saisonnier. Trouver une voix qui dure entre les collections. Les sujets étaient là — encore fallait-il les nommer, les hiérarchiser, leur donner une cadence."],
      ["Le geste", "Une plateforme « Institute » pensée comme une revue ouverte : conversations filmées, sélections d'ouvrages, expositions ponctuelles. Chaque édition trimestrielle propose un thème qui circule de l'imprimé à l'Instagram, sans rupture de ton."],
      ["Le résultat", "Trois éditions publiées, une circulation organique en hausse de 240% sur le canal éditorial, un repositionnement perçu sans changer de logo. La marque continue de vendre des sacs — mais elle est devenue un endroit où l'on pense."],
    ],
    gallery: ["assets/photo-statue.png", "assets/photo-miumiu-show.png"],
  },
  "varne": {
    label: "enjeu",
    client: "Varne",
    title: "Varne — l'objet précieux du quotidien",
    kind: "Identité · Lifestyle",
    year: "2025",
    duration: "4 mois",
    services: ["Identité visuelle", "Direction photo", "Naming", "Site éditorial"],
    hero: "assets/photo-varne-hat.png",
    intro: "Varne fabrique des accessoires de cheveux à la main, en métal, en France. Le produit était irréprochable. La marque, elle, devait apprendre à se présenter sans en faire trop — précieuse, mais jamais ostentatoire.",
    body: [
      ["Le contexte", "Une fondatrice perfectionniste, un atelier confidentiel, et la conviction que ces objets méritaient un récit aussi soigné que leur fabrication. Le piège : tomber dans le luxe générique, fait de gris froid et de typographie serif."],
      ["Le geste", "Une charte chaude — sable, ivoire, métal poli. Une typographie unique, posée. Une photographie qui place toujours l'objet en relation : posé près d'un chapeau, glissé dans une coiffure. L'accessoire n'est jamais isolé — il est dans la vie."],
      ["Le résultat", "Un site éditorial sobre, des campagnes saisonnières lisibles à l'instant, et une communauté qui se reconnaît dans la marque sans qu'elle ait à crier. Le panier moyen a doublé en six mois."],
    ],
    gallery: ["assets/photo-varne-barette.png", "assets/photo-varne-hat.png"],
  },
  "horse": {
    label: "signal",
    client: "Maison cavalière",
    title: "Cuir & monde équestre — précision d'une signature",
    kind: "Direction artistique",
    year: "2024",
    duration: "3 mois",
    services: ["Direction artistique", "Photo", "Identité visuelle"],
    hero: "assets/photo-horse.jpg",
    intro: "Une maison de sellerie de tradition voulait s'adresser à une nouvelle génération sans renier son geste. Le défi : rendre la précision du métier sans tomber dans l'imagerie usée du monde équestre.",
    body: [
      ["Le contexte", "Plus de cent ans de savoir-faire, une clientèle vieillissante, des imitations partout. Il fallait un signal — une image qui dise immédiatement le niveau d'exigence, sans dire le mot luxe."],
      ["Le geste", "Une campagne réduite à deux gestes : la main, le cuir. Rouge profond, gris, blanc — pas de troisième couleur. Cadrages serrés, presque cliniques, qui laissent voir la couture."],
      ["Le résultat", "La marque a recruté une clientèle plus jeune sans perdre la précédente. Les pièces se sont vendues avant d'être photographiées en boutique."],
    ],
    gallery: ["assets/photo-horse.jpg", "assets/photo-leather.jpg"],
  },
  "leather": {
    label: "vrai sujet",
    client: "Studio Lazare",
    title: "Le retour assumé du brun-tabac",
    kind: "Carousel · Mode",
    year: "2026",
    duration: "Carousel signature",
    services: ["Veille culturelle", "Carousel", "Copy éditorial"],
    hero: "assets/photo-leather.jpg",
    intro: "Le brun-tabac n'est pas une couleur de saison. C'est un code de classe qui revient quand l'époque cherche une assise. On en a fait un carousel d'analyse — pas un moodboard.",
    body: [
      ["Le phénomène", "Cuir caramel, bois cirés, suède foncé. Sur les podiums comme dans les intérieurs. Pas une tendance — un retour de structure."],
      ["Le débat", "Nostalgie bourgeoise ou besoin réel d'ancrage ? La question vaut autant pour la mode que pour l'aménagement intérieur."],
      ["Le take", "Le brun rassure parce qu'il ne tente pas de plaire. C'est exactement pour ça qu'il revient — et qu'il restera."],
    ],
    gallery: ["assets/photo-leather.jpg"],
  },
  "statue": {
    label: "débat",
    client: "AnOther — édition",
    title: "Patrimoine, marques, appropriations",
    kind: "Étude culturelle",
    year: "2025",
    duration: "8 semaines",
    services: ["Étude culturelle", "Édition", "Direction photo"],
    hero: "assets/photo-statue.png",
    intro: "Quand une marque pose son logo sur une statue antique, est-ce un dialogue, un détournement, ou un acte de vandalisme symbolique ? On a interrogé la pratique sans la condamner par défaut.",
    body: [
      ["Le contexte", "Multiplication des collaborations entre maisons de luxe et institutions patrimoniales. Le geste devient un cliché. Le sens, lui, se dilue."],
      ["Le geste", "Une étude en six temps, publiée en édition limitée, avec photographies originales. Lecture critique — pas pamphlet."],
      ["Le résultat", "Un texte de référence cité par trois revues spécialisées. La marque qui l'a commandé a depuis revu sa politique de partenariat."],
    ],
    gallery: ["assets/photo-statue.png"],
  },
  "women": {
    label: "take",
    client: "Maison K.",
    title: "Pluralité des corps, fin du token",
    kind: "Campagne · Beauté",
    year: "2026",
    duration: "5 mois",
    services: ["Plateforme", "Direction artistique", "Production photo"],
    hero: "assets/photo-women.jpg",
    intro: "On ne « représente » pas la diversité — on la met au centre, ou pas du tout. Pour Maison K., on a refusé le casting symbolique et reconstruit la campagne autour d'un seul groupe, en silence.",
    body: [
      ["Le contexte", "Une marque de soin qui voulait élargir son public sans paraître opportuniste. Le marché venait de se lasser des campagnes-mosaïque où chaque corps cochait une case."],
      ["Le geste", "Une seule prise de vue, quinze femmes, même lumière. Pas de slogan, pas d'intention narrative. La pluralité comme cadre — pas comme sujet."],
      ["Le résultat", "Une campagne reprise par six magazines en presse spontanée. La marque n'a pas eu à s'expliquer."],
    ],
    gallery: ["assets/photo-women.jpg"],
  },
};

const CaseStudyContent = () => {
  const [id, setId] = React.useState("miumiu");
  React.useEffect(() => {
    const url = new URL(window.location.href);
    const q = url.searchParams.get("id");
    if (q && CASE_STUDIES[q]) setId(q);
  }, []);

  const s = CASE_STUDIES[id];
  const fontFamily = '"Helvetica Neue", Helvetica, Arial, sans-serif';

  return (
    <article style={{ fontFamily, color: "#fff", background: "#0A0A0A" }}>
      {/* HERO */}
      <section style={{ position: "relative", width: "100%", height: "100vh", minHeight: 720, overflow: "hidden" }}>
        <img src={s.hero} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.7) 100%)" }} />
        <div style={{ position: "absolute", left: 56, right: 56, bottom: 110, color: "#fff" }}>
          <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .8, marginBottom: 28, fontWeight: 700 }}>
            {s.client} — {s.kind}
          </div>
          <h1 style={{ fontSize: "clamp(48px, 6.4vw, 124px)", lineHeight: .95, letterSpacing: "-0.025em", fontWeight: 700, margin: 0, maxWidth: 1500 }}>
            {s.title}
          </h1>
        </div>
      </section>

      {/* META */}
      <section style={{ background: "#EDE8D8", color: "#0A0A0A", padding: "100px 56px" }}>
        <div style={{ maxWidth: 1600, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr 1fr 2fr", gap: 48, borderTop: "1px solid rgba(0,0,0,.18)", paddingTop: 40 }}>
          <Meta label="Client" value={s.client} />
          <Meta label="Année" value={s.year} />
          <Meta label="Durée" value={s.duration} />
          <Meta label="Expertises" value={s.services.join(" · ")} />
        </div>
      </section>

      {/* INTRO */}
      <section style={{ background: "#EDE8D8", color: "#0A0A0A", padding: "0 56px 160px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <p style={{ fontSize: "clamp(28px, 2.5vw, 38px)", lineHeight: 1.35, fontWeight: 400, letterSpacing: "-0.005em", margin: 0 }}>
            {s.intro}
          </p>
        </div>
      </section>

      {/* BODY */}
      <section style={{ background: "#0A0A0A", color: "#fff", padding: "180px 56px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          {s.body.map(([h, p], i) => (
            <div key={i} style={{ marginBottom: 100, borderTop: "1px solid rgba(255,255,255,.18)", paddingTop: 36 }}>
              <div style={{ fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", opacity: .55, fontWeight: 700, marginBottom: 22 }}>{`0${i+1}`} — {h}</div>
              <p style={{ fontSize: "clamp(22px, 1.7vw, 26px)", lineHeight: 1.5, fontWeight: 400, margin: 0, opacity: .92 }}>{p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* GALLERY */}
      {s.gallery && s.gallery.length > 0 && (
        <section style={{ background: "#0A0A0A", padding: "0 0 180px" }}>
          <div style={{ display: "grid", gridTemplateColumns: s.gallery.length > 1 ? "1fr 1fr" : "1fr", gap: 4 }}>
            {s.gallery.map((g, i) => (
              <img key={i} src={g} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", aspectRatio: "4/5", display: "block" }} />
            ))}
          </div>
        </section>
      )}

      {/* CTA */}
      <section style={{ background: "#3D1520", color: "#fff", padding: "200px 56px", textAlign: "center" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", opacity: .65, fontWeight: 700, marginBottom: 36 }}>
            Un projet en tête ?
          </div>
          <h2 style={{ fontSize: "clamp(64px, 7vw, 112px)", lineHeight: .98, letterSpacing: "-0.025em", fontWeight: 700, margin: "0 0 60px" }}>
            Travaillons<br/><i>ensemble.</i>
          </h2>
          <a href="index.html#contact" style={{
            display: "inline-block", color: "#fff", textDecoration: "none",
            fontSize: 13, letterSpacing: ".24em", textTransform: "uppercase", fontWeight: 700,
            border: "1px solid rgba(255,255,255,.6)", padding: "20px 36px",
          }}>
            Prendre contact →
          </a>
          <div style={{ marginTop: 80 }}>
            <a href="index.html#travail" style={{ color: "#fff", fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 700, opacity: .65, textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,.3)", paddingBottom: 4 }}>
              ← Retour au travail
            </a>
          </div>
        </div>
      </section>
    </article>
  );
};

const Meta = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 11, letterSpacing: ".24em", textTransform: "uppercase", opacity: .55, fontWeight: 700, marginBottom: 12 }}>{label}</div>
    <div style={{ fontSize: 19, lineHeight: 1.4, fontWeight: 400 }}>{value}</div>
  </div>
);

window.CaseStudyContent = CaseStudyContent;
window.CASE_STUDIES = CASE_STUDIES;