/* global React, Section, Eyebrow */
// Gallery.jsx — photo gallery of the home's spaces

const PHOTOS = [
  { src: 'assets/photos/jardin-amplio.jpeg', alt: 'Jardín amplio con árboles, sombra y espacios de descanso', label: 'Jardín amplio' },
  { src: 'assets/photos/patio-arbol-sombra.jpeg', alt: 'Patio con pasto, árbol grande y rincones para estar al aire libre', label: 'Patio con sombra' },
  { src: 'assets/photos/mesa-bajo-arboles.jpeg', alt: 'Mesa exterior bajo los árboles junto al quincho', label: 'Mesa bajo los árboles' },
  { src: 'assets/photos/arbol-quincho-otono.jpeg', alt: 'Árbol con hojas amarillas y quincho entre la vegetación', label: 'Árboles y quincho' },
  { src: 'assets/photos/quincho-rustico.jpeg', alt: 'Quincho rústico rodeado de pasto y árboles', label: 'Quincho y jardín' },
  { src: 'assets/photos/frontis-entrada.jpeg', alt: 'Entrada con sendero, pasto y vegetación alrededor del hogar', label: 'Entrada verde' },
];

function Gallery() {
  return (
    <Section id="galeria" bg="sand">
      <div className="mr-sectionhead">
        <Eyebrow>Espacios del hogar</Eyebrow>
        <h2 className="mr-h2">Un lugar para vivir con calma y compañía</h2>
        <p className="mr-lead" style={{ marginTop: 16, maxWidth: '58ch' }}>
          Espacios comunes, jardines abiertos, rincones de descanso y habitaciones pensadas
          para que cada residente se sienta acompañado y cómodo.
        </p>
      </div>
      <div className="mr-gallery">
        {PHOTOS.map((p, i) => (
          <figure key={i} className={`mr-gallery__item${i === 0 ? ' mr-gallery__item--wide' : ''}`}>
            <img src={p.src} alt={p.alt} loading="lazy" />
            <figcaption>{p.label}</figcaption>
          </figure>
        ))}
      </div>
    </Section>
  );
}

window.Gallery = Gallery;