/* global React */
const PHOTOS = [
  'uploads/Voor-FW-site-29-1024x576.webp',
  'uploads/Voor-FW-site-20-1024x576.webp',
  'uploads/LONDEN-12-1024x576.webp',
  'uploads/Voor-FW-site-5-1024x576.webp',
  'uploads/LONDEN-22-1024x576.webp',
  'uploads/Voor-FW-site-53-1024x576.webp',
  'uploads/Voor-FW-site-19-1024x576.webp',
  'uploads/Voor-FW-site-49-1024x576.webp',
  'uploads/Voor-FW-site-41-1024x576.webp',
  'uploads/Voor-FW-site-38-1024x576.webp',
  'uploads/frissewand-fotos-nas-6-1024x576.webp',
  'uploads/Voor-FW-site-17-1024x576.webp'
];

function Gallery() {
  return (
    <section className="fw-section fw-section--tint" id="collectie">
      <div className="fw-container">
        <header className="fw-gallery__head">
          <span className="fw-eyebrow">Collectie</span>
          <h2 className="fw-h1">Een greep uit de collectie</h2>
          <p className="fw-lede">Onze collectie bestaat uit zorgvuldig geselecteerde foto&apos;s met verschillende thema&apos;s: van rustige natuurfoto&apos;s tot stadsbeelden en artistieke fotografie.<br/>Zo zijn er altijd beelden die passen bij de sfeer van jouw kantoor of bedrijfspand.</p>
          <p>Zoals je wellicht al vermoedt: We hebben nog veel meer foto&apos;s beschikbaar die we op aanvraag kunnen laten zien. Ben je opzoek naar iets &eacute;cht specifieks? Ook dat kan.<br/>Denk bijvoorbeeld aan beelden uit de regio van jouw bedrijf. Neem ook hiervoor contact met ons op.</p>
        </header>
        <div className="fw-gallery__grid">
          {PHOTOS.map((src, i) => (
            <figure key={i} className="fw-gallery__tile">
              <div className="fw-frame">
                <img src={src} alt="" loading="lazy" />
              </div>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;