/* WELT — Gallery
 * Editorial lookbook. Justified rows, image-led, no prices or CTAs.
 * Day → night story: Torre de Hércules (A Coruña) to a Madrid rooftop.
 * Mixed source aspects: portraits flex narrower, squares wider; all cover-crop.
 */
function Gallery() {
  const rows = [
    [
      { img: 'assets/gallery/coruna-tower-day.jpg', ar: 'portrait', alt: 'WELT Día — lentes amarillas frente a la Torre de Hércules, A Coruña' },
      { img: 'assets/gallery/day-work.jpg',         ar: 'square',   alt: 'WELT Día sobre el escritorio, junto al portátil' },
      { img: 'assets/gallery/day-linen.jpg',        ar: 'square',   alt: 'WELT Día sobre lino, luz de sol' },
    ],
    [
      { img: 'assets/gallery/duo.webp', ar: 'portrait', alt: 'WELT Día y Noche — lentes amarilla y roja, vista cenital' },
      { img: 'assets/gallery/kit.jpg',  ar: 'square',   alt: 'WELT — gafa, funda rígida, paño y tarjeta' },
    ],
    [
      { img: 'assets/gallery/night-madrid.jpg', ar: 'portrait', alt: 'WELT Noche — lentes rojas sobre una azotea de Madrid' },
      { img: 'assets/gallery/night-linen.jpg',  ar: 'square',   alt: 'WELT Noche sobre lino, luz de contraste' },
      { img: 'assets/gallery/night-macro.jpg',  ar: 'square',   alt: 'Detalle del grabado WELT en la lente roja' },
    ],
  ];

  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>De la Torre de Hércules al skyline de Madrid. La misma montura, dos filtros, un día entero.</p>
        </header>

        <div className="gallery-grid">
          {rows.map((row, i) => (
            <div className="g-row" key={i}>
              {row.map((p) => (
                <figure className={`plate is-${p.ar}`} key={p.img}>
                  <img src={p.img} alt={p.alt} loading="lazy" />
                </figure>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;