// Gallery.jsx — Boricua color-blocked food gallery
const TILES = [
  { c: 't1', cap: 'Cubano · hot pressed' },
  { c: 't2', cap: 'Pan sobao' },
  { c: 't3', cap: 'The line on Saturday' },
  { c: 't4', cap: 'Malta' },
  { c: 't5', cap: 'Storefront' },
  { c: 't6', cap: 'Pernil overnight' },
  { c: 't7', cap: 'Coffee, all day' },
];

const Gallery = () => {
  return (
    <section id="gallery" className="psd-section psd-section--gallery">
      <div className="psd-section-head psd-reveal">
        <div className="psd-script psd-section-script">A look inside</div>
        <h2 className="psd-section-title">The good stuff.</h2>
        <p className="psd-section-lede">Real food, real people, real Saturdays.</p>
      </div>
      <div className="psd-gallery-grid">
        {TILES.map((t, i) => (
          <figure key={i} className={'psd-gallery-tile psd-reveal ' + t.c}>
            <figcaption className="psd-gallery-caption">{t.cap}</figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

window.Gallery = Gallery;