// Gallery.jsx — editorial photo grid mosaic
const Gallery = () => {
  const items = [
    { src: "assets/photo-varne-barette.png", caption: "Léa · Varne", kind: "Direction artistique" },
    { src: "assets/photo-coffee.jpg",         caption: "Neat Coffee Club", kind: "Identité · Lifestyle" },
    { src: "assets/photo-metro-blazer.jpg",   caption: "Travel codes", kind: "Campagne · Mode" },
    { src: "assets/photo-leaf.jpg",           caption: "Botanique", kind: "Beauté · Texture" },
    { src: "assets/photo-golf.jpg",           caption: "Aerial · Pebble", kind: "Lifestyle" },
  ];
  return (
    <section style={{
      background: "#0A0A0A", color: "#fff",
      padding: "180px 56px 200px",
      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 }}>
              Atelier · Visuels récents
            </div>
            <h2 style={{ fontSize: "clamp(56px, 5.5vw, 88px)", lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 700, margin: 0 }}>
              Direction <i>artistique.</i>
            </h2>
          </div>
          <div style={{ maxWidth: 360, fontSize: 17, lineHeight: 1.55, opacity: .75 }}>
            Une grammaire visuelle reconnaissable, déclinée pour chaque marque sans jamais s'effacer.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16 }}>
          <Tile {...items[0]} span={5} ratio="3/4" />
          <Tile {...items[1]} span={4} ratio="3/4" />
          <Tile {...items[2]} span={3} ratio="3/4" />
          <Tile {...items[3]} span={5} ratio="4/3" />
          <Tile {...items[4]} span={7} ratio="4/3" />
        </div>
      </div>
    </section>
  );
};

const Tile = ({ src, caption, kind, span, ratio }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{ gridColumn: `span ${span}` }}
    >
      <div style={{ position: "relative", width: "100%", aspectRatio: ratio, overflow: "hidden", background: "#111" }}>
        <img src={src} alt="" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
          transform: hov ? "scale(1.04)" : "scale(1)",
          transition: "transform 600ms cubic-bezier(0.2, 0, 0, 1)",
        }} />
        <div style={{ position: "absolute", inset: 0, background: hov ? "rgba(0,0,0,.32)" : "rgba(0,0,0,.10)", transition: "background 240ms ease-out" }} />
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 14 }}>
        <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: "-0.005em" }}>{caption}</div>
        <div style={{ fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", opacity: .55, fontWeight: 700 }}>{kind}</div>
      </div>
    </div>
  );
};

window.Gallery = Gallery;