/* ART ADDA — Gallery */
function Gallery({ go }) {
  useReveal();
  const D = window.ARTADDA;

  // Build a gallery set from artists' work counts.
  const items = React.useMemo(() => {
    const titles = [
      "Untitled", "Still Morning", "Out of Chaos", "Believe I", "Tidal Pool",
      "Heritage Wall", "Quiet Landscape", "Reflection", "Bloom", "Spotlight",
      "Mural Study", "Riverbank", "Geometry of Calm", "Evening at Adda", "Portrait No.3",
      "Backwaters", "Patterns", "Letting Go", "Field Notes", "Small Work",
    ];
    const cats = ["Painting", "Watercolour", "Photography", "Mural", "Sketch", "Mosaic"];
    const ratios = ["4/5", "3/4", "1/1", "4/3", "5/7", "3/4", "4/5", "1/1"];
    let i = 0;
    const out = [];
    D.artists.forEach((a) => {
      const n = Math.min(a.works || 3, 4);
      for (let k = 0; k < n; k++) {
        const cat = a.mediums && a.mediums[0] ? normaliseCat(a.mediums[0]) : "Painting";
        out.push({
          id: `${a.id}-${k}`,
          title: titles[i % titles.length],
          artist: a.name,
          artistId: a.id,
          cat,
          ratio: ratios[i % ratios.length],
          meta: `${a.name} · ${cat}`,
          label: `${a.name} — work ${k + 1}`,
          src: D.img.work(a.id, k + 1),
        });
        i++;
      }
    });
    return out;
  }, []);

  function normaliseCat(m) {
    const map = { Oil: "Painting", Acrylic: "Painting", Watercolour: "Watercolour", Pastel: "Painting", Charcoal: "Sketch", Pencil: "Sketch", Photography: "Photography", Illustration: "Sketch", Mural: "Mural", "Natural Pigment": "Mural", Mosaic: "Mosaic", "Mixed Media": "Painting", Digital: "Painting", "Dry Pastel": "Sketch" };
    return map[m] || "Painting";
  }

  const cats = ["All", "Painting", "Watercolour", "Sketch", "Photography", "Mural", "Mosaic"];
  const [filter, setFilter] = useState("All");
  const [lbIndex, setLbIndex] = useState(null);

  const shown = filter === "All" ? items : items.filter((it) => it.cat === filter);

  const openLb = (it) => setLbIndex(shown.findIndex((s) => s.id === it.id));
  const navLb = (dir) => setLbIndex((p) => (p + dir + shown.length) % shown.length);

  return (
    <div className="rise-in">
      <section className="wrap page-intro">
        <p className="eyebrow reveal" style={{ marginBottom: 22 }}>The Gallery</p>
        <h1 className="serif reveal">Works on<br />the Adda</h1>
        <p className="lede reveal" style={{ maxWidth: "52ch", marginTop: 26 }}>
          A growing archive of pieces shown across Art Adda's editions. Tap any work to view it larger.
          <span className="faint"> Drop your event photos in to replace the placeholders.</span>
        </p>
      </section>

      <section className="wrap section" style={{ paddingTop: "clamp(30px,4vw,50px)" }}>
        <div className="gal-filter reveal">
          {cats.map((c) => (
            <button key={c} className={"chip" + (filter === c ? " is-active" : "")} onClick={() => { setFilter(c); }}>
              {c} {c !== "All" && <span style={{ opacity: .5 }}>{items.filter((it) => it.cat === c).length}</span>}
            </button>
          ))}
        </div>

        <div className="gal reveal" key={filter}>
          {shown.map((it) => (
            <figure className="gal__item" key={it.id} onClick={() => openLb(it)}>
              <Ph label={it.label} ratio={it.ratio} src={it.src} />
              <figcaption className="gal__cap">
                <span className="t serif">{it.title}</span>
                <span className="m">{it.cat}</span>
              </figcaption>
            </figure>
          ))}
        </div>
        {shown.length === 0 && <p className="muted center" style={{ padding: "60px 0" }}>No works in this category yet.</p>}
      </section>

      <Lightbox items={shown} index={lbIndex} onClose={() => setLbIndex(null)} onNav={navLb} />
    </div>
  );
}
window.Gallery = Gallery;