// Photo Gallery — filterable responsive grid
function TempleGallery({ t, compact }) {
  const lang = t.locale;
  const ui = t.templeActivities.gallery;
  const cats = ui.categories;
  const allItems = (window.TEMPLE_ACTIVITIES && window.TEMPLE_ACTIVITIES.gallery) ? window.TEMPLE_ACTIVITIES.gallery : [];
  const [filter, setFilter] = useState("all");

  const filters = compact
    ? [
        { id: "all", label: ui.filterAll },
        { id: "ceremonies", label: cats.ceremonies },
        { id: "festivals", label: cats.festivals },
        { id: "community", label: cats.community },
      ]
    : [
        { id: "all", label: ui.filterAll },
        { id: "ceremonies", label: cats.ceremonies },
        { id: "festivals", label: cats.festivals },
        { id: "meditation", label: cats.meditation },
        { id: "community", label: cats.community },
        { id: "culture", label: cats.culture },
        { id: "volunteer", label: cats.volunteer },
      ];

  const filtered = filter === "all" ? allItems : allItems.filter(function (g) { return g.category === filter; });
  const shown = compact ? filtered.slice(0, 4) : filtered;

  if (compact) {
    return (
      <TempleSection id="temple-gallery" eyebrow={ui.eyebrow} title={ui.title} intro={ui.homeIntro || ui.intro} alt compact>
        <div className="wn-gallery-filters" style={{ display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "14px" }} role="group" aria-label={ui.filterLabel}>
          {filters.map(function (f) {
            return (
              <TempleFilterChip key={f.id} label={f.label} active={filter === f.id} onClick={function () { setFilter(f.id); }} />
            );
          })}
        </div>
        <div className="wn-gallery-grid wn-gallery-grid--compact" style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "10px" }}>
          {shown.map(function (item) {
            return (
              <figure
                key={item.id}
                className="wn-gallery-item"
                style={{
                  position: "relative",
                  margin: 0,
                  overflow: "hidden",
                  borderRadius: "14px",
                  minHeight: "140px",
                  aspectRatio: "4 / 3",
                }}
              >
                <img
                  src={item.image}
                  alt={taText(item.caption, lang)}
                  loading="lazy"
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                  className="wn-gallery-img"
                />
                <figcaption style={{
                  position: "absolute",
                  inset: 0,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "flex-end",
                  padding: "12px",
                  background: "linear-gradient(to top, rgba(20,14,6,0.75) 0%, rgba(20,14,6,0) 55%)",
                }}>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(14px, 2.8vw, 17px)", lineHeight: 1.25, color: "var(--bg)" }}>
                    {taText(item.caption, lang)}
                  </span>
                </figcaption>
              </figure>
            );
          })}
        </div>
      </TempleSection>
    );
  }

  return (
    <TempleSection id="temple-gallery" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro} alt>
      <div className="wn-gallery-filters" style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "24px" }} role="group" aria-label={ui.filterLabel}>
        {filters.map(function (f) {
          return (
            <TempleFilterChip key={f.id} label={f.label} active={filter === f.id} onClick={function () { setFilter(f.id); }} />
          );
        })}
      </div>
      <div className="wn-gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "16px" }}>
        {shown.map(function (item, i) {
          const large = i === 0 && filter === "all";
          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",
              }}
            >
              <img
                src={item.image}
                alt={taText(item.caption, lang)}
                loading="lazy"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 400ms ease" }}
                className="wn-gallery-img"
              />
              <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%)",
                opacity: 0.92,
              }}>
                <span style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "6px" }}>
                  {cats[item.category] || item.category}
                </span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(18px, 3vw, 24px)", lineHeight: 1.25, color: "var(--bg)" }}>
                  {taText(item.caption, lang)}
                </span>
              </figcaption>
            </figure>
          );
        })}
      </div>
    </TempleSection>
  );
}