/* ============ GALLERY — filterable masonry + lightbox ============ */
function Gallery() {
  const S = window.SITE;
  const cats = ["All", "Garden", "Rooms", "Cafe", "Events", "Auroville", "Lounge"];
  const [filter, setFilter] = useState("All");
  const [light, setLight] = useState(null);

  const items = S.gallery;
  const shown = filter === "All" ? items : items.filter((g) => g.cat === filter);

  useEffect(() => {
    const onKey = (e) => {
      if (light === null) return;
      if (e.key === "Escape") setLight(null);
      if (e.key === "ArrowRight") setLight((l) => (l + 1) % shown.length);
      if (e.key === "ArrowLeft") setLight((l) => (l - 1 + shown.length) % shown.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [light, shown.length]);

  return (
    <section id="gallery" className="section bg-alt gallery">
      <div className="container">
        <div className="section-head" style={{ marginInline: "auto", textAlign: "center", alignItems: "center", display: "flex", flexDirection: "column" }}>
          <Eyebrow>Postcards from the ridge</Eyebrow>
          <Reveal as="h2" className="display">A little look <em className="muted-em">around.</em></Reveal>
        </div>

        <div className="gal-filters">
          {cats.map((c) => (
            <button key={c} className={`gfilter ${filter === c ? "on" : ""}`} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>

        <div className="masonry">
          {shown.map((g, i) => (
            <Reveal key={g.label + i} className={`gitem ${g.tall ? "tall" : ""}`} delay={(i % 4) * 70}
              onClick={() => setLight(i)} role="button" tabIndex={0}>
              <Photo src={g.img} alt={g.label} label="" rounded="var(--r-md)" style={{ height: g.tall ? 300 : 200 }} />
              <span className="gitem-cat">{g.cat}</span>
              <span className="gitem-zoom"><Icon name="expand" /></span>
            </Reveal>
          ))}
        </div>
      </div>

      {light !== null && (
        <div className="lightbox" onClick={() => setLight(null)}>
          <button className="lb-close" aria-label="Close"><Icon name="xmark" /></button>
          <button className="lb-nav lb-prev" aria-label="Previous" onClick={(e) => { e.stopPropagation(); setLight((l) => (l - 1 + shown.length) % shown.length); }}><Icon name="chevron-left" /></button>
          <div className="lb-stage" onClick={(e) => e.stopPropagation()}>
            <Photo src={shown[light].img} alt={shown[light].label} label={shown[light].label} rounded="var(--r-md)" style={{ width: "min(80vw, 900px)", height: "min(70vh, 560px)" }} />
            <span className="lb-cap">{shown[light].label} · {shown[light].cat}</span>
          </div>
          <button className="lb-nav lb-next" aria-label="Next" onClick={(e) => { e.stopPropagation(); setLight((l) => (l + 1) % shown.length); }}><Icon name="chevron-right" /></button>
        </div>
      )}

      <style>{`
        .gal-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
        .gfilter { font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 99px; color: var(--text-2); border: 1px solid var(--border); transition: all .3s var(--ease); }
        .gfilter:hover { color: var(--text); border-color: var(--primary); }
        .gfilter.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
        html[data-theme="dark"] .gfilter.on { box-shadow: 0 0 20px -4px var(--glow); }

        .masonry { columns: 4; column-gap: 16px; }
        .gitem { position: relative; break-inside: avoid; margin-bottom: 16px; cursor: pointer; border-radius: var(--r-md); overflow: hidden; }
        .gitem .ph { height: 200px; }
        .gitem.tall .ph { height: 300px; }
        .gitem:hover .ph img { transform: scale(1.05); }
        .gitem-cat { position: absolute; top: 12px; left: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text); background: var(--surface); padding: 5px 10px; border-radius: 99px; border: 1px solid var(--border); }
        .gitem-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; background: rgba(20,18,30,.35); opacity: 0; transition: opacity .35s; }
        .gitem:hover .gitem-zoom { opacity: 1; }

        .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(6,5,12,.86); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px; animation: lbIn .3s ease; }
        @keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }
        .lb-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
        .lb-cap { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
        .lb-close { position: absolute; top: 22px; right: 26px; color: #fff; font-size: 26px; width: 44px; height: 44px; }
        .lb-nav { color: #fff; font-size: 22px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); flex-shrink: 0; transition: background .25s; }
        .lb-nav:hover { background: rgba(255,255,255,.12); }

        @media (max-width: 1024px) { .masonry { columns: 3; } }
        @media (max-width: 760px) { .masonry { columns: 2; } .lb-nav { width: 44px; height: 44px; } }
        @media (max-width: 440px) { .masonry { columns: 1; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Gallery });