/* WELT — Gallery
 * Editorial lookbook. Asymmetric mosaic, image-led, no prices or CTAs.
 * Day → night story, with detail and packaging plates.
 */
function Gallery() {
  const plates = [
    { cls: 'g-duo',   img: 'assets/gallery/duo.jpg',        alt: 'WELT Día y Noche — lentes amarilla y roja, vista cenital' },
    { cls: 'g-desk',  img: 'assets/gallery/day-desk.jpg',   alt: 'WELT Día sobre escritorio junto al portátil' },
    { cls: 'g-macroY',img: 'assets/gallery/day-macro.jpg',  alt: 'Detalle del grabado WELT en la lente amarilla' },
    { cls: 'g-macroR',img: 'assets/gallery/night-macro.jpg',alt: 'Detalle del grabado WELT en la lente roja' },
    { cls: 'g-kit',   img: 'assets/gallery/day-kit.jpg',    alt: 'WELT Día — gafa, funda, paño y tarjeta' },
    { cls: 'g-lamp',  img: 'assets/gallery/night-lamp.jpg', alt: 'WELT Noche sobre la mesilla, luz cálida' },
    { cls: 'g-linen', img: 'assets/gallery/night-linen.jpg',alt: 'WELT Noche sobre lino, luz de contraste' },
  ];

  return (
    <section className="gallery" id="galeria">
      <div className="container">
        <header className="gallery-head">
          <span className="eyebrow">Galería</span>
          <h2>En su elemento.</h2>
          <p>Del escritorio a la mesilla. La misma montura, dos filtros, un día entero.</p>
        </header>

        <div className="gallery-grid">
          {plates.map((p) => (
            <figure className={`plate ${p.cls}`} key={p.cls}>
              <img src={p.img} alt={p.alt} loading="lazy" />
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;