const GALLERY_TILES = [
  { cls: 't-a', caption: 'Beat Battle #6 · Mar 2026', colored: false },
  { cls: 't-b', caption: 'Open Decks · Feb', colored: true },
  { cls: 't-c', caption: 'Synth Meet · Jan', colored: true },
  { cls: 't-d', caption: 'Workshop: Ableton 101', colored: true },
  { cls: 't-e', caption: 'Spring Showcase 2025', colored: false },
  { cls: 't-f', caption: 'Gear Swap · Dec', colored: true },
  { cls: 't-g', caption: 'Cypher Night · Nov', colored: false },
  { cls: 't-h', caption: 'First Friday Jam', colored: true },
];

function Gallery() {
  return (
    <section className="container" id="gallery">
      <SectionHead
        num="[03] / PAST EVENTS"
        title="The <em>receipts</em>."
        sub="Photos from past events. Tap a tile to see the full recap and set recordings."
      />
      <div className="gallery">
        {GALLERY_TILES.map((t, i) => (
          <div key={i} className={"gallery-tile " + t.cls + (t.colored ? " colored" : "")}>
            <div className="placeholder">
              <div className="caption">{t.caption}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Gallery = Gallery;