/* GALLERY — editorial: quiet asymmetric grid, captions in the margin, hairline numbering */

function Gallery({ t }) {
  const ref = React.useRef(null);
  const [p, setP] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const v = Math.max(0, Math.min(1, (window.innerHeight - r.top) / (window.innerHeight + r.height)));
      setP(v);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
    { label: "villa · andalucía",  ratio: "3/4", offset: 0.3,  kind: "",      src: "uploads/gallery-villa-view.jpeg" },
    { label: "table · al fresco",  ratio: "4/3", offset: 0.55, kind: "",      src: "uploads/gallery-table-setting.jpeg" },
    { label: "yacht galley",       ratio: "3/4", offset: 0.4,  kind: "dark",  src: "uploads/gallery-fish-prep.jpeg" },
    { label: "chef · langoustines",ratio: "1/1", offset: 0.6,  kind: "",      src: "uploads/gallery-nati-langoustines.jpeg" },
    { label: "tomate · plated",    ratio: "3/4", offset: 0.35, kind: "",      src: "uploads/gallery-tomate-plated.jpeg" },
    { label: "galley · at sea",    ratio: "4/3", offset: 0.5,  kind: "terra", src: "uploads/gallery-lamb-sea.jpeg" },
  ];

  return (
    <section ref={ref} className="bg-cream gallery-section" data-screen-label="05 Gallery" id="gallery">
      <div className="section gallery-inner">
        <header className="gallery-head">
          <div className="sec-badge">
            <span className="num">05</span>
            <span className="bar" />
            <span>{t.galleryEyebrow}</span>
          </div>
          <h2 className="gallery-title display">
            <span>{t.galleryT1}</span>{" "}
            <span className="italic-serif">{t.galleryT2}</span>
          </h2>
          <div className="gallery-meta mono">A visual diary · 06 plates</div>
        </header>

        <div className="gallery-grid">
          {items.map((it, i) => (
            <figure
              key={i}
              className={`g-item g-${i}`}
              style={{ transform: `translateY(${(p - it.offset) * 60}px)` }}
            >
              <img src={it.src} alt={it.label} style={{ width: "100%", aspectRatio: it.ratio, objectFit: "cover", display: "block" }} />
              <figcaption>
                <span className="cap-num mono">Plate {String(i + 1).padStart(2, "0")}</span>
                <span className="italic-serif">{it.label}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <style>{`
        .gallery-inner { padding-block: clamp(120px, 18vh, 200px); }
        .gallery-head {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: end;
          gap: 48px;
          margin-bottom: 96px;
          padding-bottom: 32px;
          border-bottom: 1px solid var(--line-soft);
        }
        .gallery-title {
          font-size: clamp(48px, 8vw, 130px);
          font-weight: 300;
          line-height: 0.95;
          letter-spacing: -0.03em;
          color: var(--slate-ink);
        }
        .gallery-title .italic-serif { color: var(--slate); }
        .gallery-meta { color: var(--muted); }
        @media (max-width: 1100px) {
          .gallery-head { grid-template-columns: 1fr; gap: 24px; }
        }

        .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; }
        .g-item { transition: transform 0.05s linear; }
        .g-item figcaption {
          display: flex;
          justify-content: space-between;
          gap: 8px;
          margin-top: 12px;
          font-size: 13px;
          color: var(--muted);
        }
        .cap-num { font-size: 10px; color: var(--slate-ink); }

        .g-0 { grid-column: 1 / span 4; }
        .g-1 { grid-column: 5 / span 5; padding-top: 80px; }
        .g-2 { grid-column: 10 / span 3; padding-top: 40px; }
        .g-3 { grid-column: 1 / span 3; padding-top: 60px; }
        .g-4 { grid-column: 4 / span 4; padding-top: 20px; }
        .g-5 { grid-column: 8 / span 5; padding-top: 100px; }

        @media (max-width: 900px) {
          .gallery-grid { grid-template-columns: repeat(6, 1fr); }
          .g-0, .g-5 { grid-column: 1 / span 6; padding-top: 0; }
          .g-1, .g-4 { grid-column: 1 / span 4; padding-top: 0; }
          .g-2, .g-3 { grid-column: 5 / span 2; padding-top: 0; }
        }
      `}</style>
    </section>
  );
}

window.Gallery = Gallery;