// Cases.jsx — editorial case grid
const Cases = () => {
  const [hov, setHov] = React.useState(null);
  const items = [
    { img: "assets/photo-horse.jpg",           label: "signal",    title: "Cuir & monde équestre",                  kind: "Direction artistique",   client: "Maison cavalière", slug: "horse" },
    { img: "assets/photo-varne-hat.png",       label: "enjeu",     title: "Varne — l'objet précieux du quotidien",  kind: "Identité · Lifestyle",   client: "Varne",            slug: "varne" },
    { img: "assets/photo-leather.jpg",         label: "vrai sujet", title: "Le retour assumé du brun-tabac",         kind: "Carousel · Mode",        client: "Studio Lazare",    slug: "leather" },
    { img: "assets/photo-statue.png",          label: "débat",     title: "Patrimoine, marques, appropriations",    kind: "Étude culturelle",       client: "AnOther — édition",slug: "statue" },
    { img: "assets/photo-women.jpg",           label: "take",      title: "Pluralité des corps, fin du token",      kind: "Campagne · Beauté",      client: "Maison K.",        slug: "women" },
  ];
  return (
    <section id="travail" style={{
      background: "#EDE8D8", color: "#0A0A0A", padding: "200px 56px 220px",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 80, gap: 48 }}>
          <div>
            <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, marginBottom: 28, fontWeight: 700 }}>
              04 — Sélection · 2024 — 2026
            </div>
            <h2 style={{ fontSize: "clamp(64px, 6.5vw, 104px)", lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 700, margin: 0 }}>
              Travail récent.
            </h2>
          </div>
          <a href="#" style={{ fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 700, color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", paddingBottom: 5 }}>
            Tout l'archive →
          </a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32, columnGap: 32, rowGap: 64 }}>
          {items.map((c, i) => {
            const isHov = hov === i;
            return (
              <a
                key={c.title}
                href={`case-study.html?id=${c.slug}`}
                onMouseEnter={() => setHov(i)}
                onMouseLeave={() => setHov(null)}
                style={{ color: "inherit", textDecoration: "none", display: "block" }}
              >
                <div style={{
                  position: "relative", width: "100%", aspectRatio: "4/5",
                  overflow: "hidden", background: "#000", marginBottom: 22,
                }}>
                  <img src={c.img} alt="" style={{
                    position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
                    transform: isHov ? "scale(1.04)" : "scale(1)",
                    transition: "transform 600ms cubic-bezier(0.2, 0, 0, 1)",
                  }} />
                  <div style={{ position: "absolute", inset: 0, background: isHov ? "rgba(0,0,0,.42)" : "rgba(0,0,0,.20)", transition: "background 300ms ease-out" }} />
                  <div style={{ position: "absolute", left: 36, top: 36, color: "#fff", fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .85, fontWeight: 700 }}>
                    {c.client}
                  </div>
                  <div style={{ position: "absolute", left: 36, bottom: 36, right: 36, color: "#fff", display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                    <div style={{ fontSize: 30, lineHeight: 1.05 }}>
                      Le <b style={{ fontWeight: 700 }}>{c.label}</b>
                    </div>
                    <div style={{
                      fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 700,
                      borderBottom: "1px solid #fff", paddingBottom: 4,
                      opacity: isHov ? 1 : 0,
                      transform: isHov ? "translateX(0)" : "translateX(-12px)",
                      transition: "all 240ms ease-out",
                    }}>
                      Lire l'étude →
                    </div>
                  </div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "4px 0" }}>
                  <div style={{ fontSize: 26, fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.005em" }}>{c.title}</div>
                  <div style={{ fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, fontWeight: 700 }}>{c.kind}</div>
                </div>
              </a>
            );
          })}
        </div>

        {/* PORTFOLIO — projet d'études */}
        <div style={{
          marginTop: 100, paddingTop: 40,
          borderTop: "1px solid rgba(0,0,0,.18)",
          display: "grid", gridTemplateColumns: "200px 1fr auto", gap: 36, alignItems: "center",
        }}>
          <div style={{ width: 200, aspectRatio: "4/3", overflow: "hidden", background: "#000" }}>
            <a href="case-study.html?id=miumiu" style={{ display: "block", width: "100%", height: "100%" }}>
              <img src="assets/photo-miumiu-show.png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </a>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: ".24em", textTransform: "uppercase", opacity: .55, fontWeight: 700, marginBottom: 10 }}>
              Portfolio — projet d'études
            </div>
            <a href="case-study.html?id=miumiu" style={{ color: "inherit", textDecoration: "none" }}>
              <div style={{ fontSize: 19, lineHeight: 1.4, fontWeight: 400, maxWidth: 720 }}>
                <i>Miu Miu Institute</i> — exercice éditorial autour de l'idée que la mode mérite la même profondeur d'analyse que la philosophie ou l'histoire de l'art : un objet culturel, pas un divertissement éphémère.
              </div>
            </a>
          </div>
          <a href="case-study.html?id=miumiu" style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 700, color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", paddingBottom: 4, whiteSpace: "nowrap" }}>
            Voir l'étude →
          </a>
        </div>
      </div>
    </section>
  );
};
window.Cases = Cases;