// Gallery — all event photos, filterable by category, with lightbox
function GalleryPage({ t, setPage }) {
  const lang = t.locale;
  const copy = t.galleryPage;
  const cats = copy.categories;
  const items = window.TempleEventsData.allImages();
  const [filter, setFilter] = useState("all");
  const [lightboxIndex, setLightboxIndex] = useState(null);

  const filters = window.TempleEventsData.categoryKeys.map(function (id) {
    return { id: id, label: cats[id] || id };
  });

  const filtered = filter === "all"
    ? items
    : items.filter(function (item) { return item.categoryKey === filter; });

  function captionFor(item) {
    var event = window.TempleEventsData.getBySlug(item.eventSlug);
    if (!event) return "";
    return window.TempleEventsData.eventTitle(event, lang);
  }

  const lightboxPhotos = filtered.map(function (item) {
    return { src: item.src, alt: captionFor(item), eventSlug: item.eventSlug };
  });

  return (
    <div>
      <div className="wn-container">
        <PageHeading eyebrow={copy.eyebrow} title={copy.title} intro={copy.intro} />
      </div>

      <section style={{ paddingBottom: "80px" }}>
        <div className="wn-container">
          <div className="wn-gallery-filters" style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "24px" }} role="group" aria-label={copy.filterLabel}>
            {filters.map(function (f) {
              return (
                <TempleFilterChip key={f.id} label={f.label} active={filter === f.id} onClick={function () { setFilter(f.id); setLightboxIndex(null); }} />
              );
            })}
          </div>

          <div className="wn-gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "16px" }}>
            {filtered.map(function (item, i) {
              const large = i === 0 && filter === "all";
              const title = captionFor(item);
              return (
                <figure
                  key={item.id}
                  className="wn-gallery-item"
                  style={{
                    position: "relative",
                    margin: 0,
                    overflow: "hidden",
                    borderRadius: "20px",
                    gridColumn: large ? "span 2" : "span 1",
                    gridRow: large ? "span 2" : "span 1",
                    minHeight: large ? "420px" : "220px",
                    aspectRatio: large ? "auto" : "4 / 3",
                    cursor: "zoom-in",
                    border: "1px solid var(--line)",
                    background: "var(--gold-soft)",
                  }}
                  onClick={function () { setLightboxIndex(i); }}
                  onKeyDown={function (e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setLightboxIndex(i); } }}
                  tabIndex={0}
                  role="button"
                  aria-label={(copy.openPhoto || "Open photo") + ": " + title}
                >
                  <img
                    className="wn-gallery-img"
                    src={item.src}
                    alt={title}
                    width={1200}
                    height={900}
                    loading="lazy"
                    decoding="async"
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 240ms ease" }}
                  />
                  <figcaption style={{
                    position: "absolute",
                    inset: 0,
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "flex-end",
                    padding: "20px",
                    background: "linear-gradient(to top, rgba(20,14,6,0.78) 0%, rgba(20,14,6,0) 55%)",
                    pointerEvents: "none",
                  }}>
                    <span style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "6px" }}>
                      {cats[item.categoryKey] || item.categoryKey}
                    </span>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(16px, 2.8vw, 22px)", lineHeight: 1.25, color: "var(--bg)" }}>
                      {title}
                    </span>
                  </figcaption>
                </figure>
              );
            })}
          </div>

          {filtered.length === 0 && (
            <p className="wn-body" style={{ textAlign: "center", color: "var(--muted)", marginTop: "24px" }}>
              {copy.empty || "—"}
            </p>
          )}

          <div style={{ marginTop: "40px", textAlign: "center", display: "flex", flexWrap: "wrap", gap: "12px", justifyContent: "center" }}>
            <BtnGhost onClick={function () { setPage("events"); }}>{copy.viewEvents}</BtnGhost>
          </div>
        </div>
      </section>

      <PhotoLightbox
        photos={lightboxPhotos}
        index={lightboxIndex}
        onClose={function () { setLightboxIndex(null); }}
        onChange={setLightboxIndex}
        labels={{
          title: copy.title,
          close: copy.close || "Close",
          prev: copy.prev || "Previous",
          next: copy.next || "Next",
        }}
      />
    </div>
  );
}