/* global React */

const GALLERY_ITEMS = [
{ src: 'assets/photos/family-lifeguard.jpg', cls: 'wide' },
{ src: 'assets/photos/truck-cab-laptop.jpg', cls: 'mid' },
{ src: 'assets/photos/camera-laptop-chair.jpg', cls: 'sq' },
{ src: 'assets/photos/bike-ride-kids.jpg', cls: 'sq' },
{ src: 'assets/photos/cafe-portrait.jpg', cls: 'sq' }];


function Gallery() {
  return (
    <section className="fk-section" id="gallery" data-screen-label="06 Gallery" style={{ paddingTop: 0 }}>
      <div className="fk-section__inner">
        <div className="section-marker">
          <span className="num">05 —</span><span>field</span>
        </div>
        <div className="fk-section__head">
          <div className="head-row">
            <h2 className="fk-h1" style={{ maxWidth: '14ch' }}>
              a year in <span className="fk-display__caveat">about five frames.</span>
            </h2>
            <p>
              I work from coffee shops more than I work from offices. These are recent — pulled from the
              week-to-week of running a remote-first company on the California coast.
            </p>
          </div>
        </div>
        <div className="gallery">
          {GALLERY_ITEMS.map((g, i) =>
          <figure className={`gallery-cell ${g.cls}`} key={i}>
              <img src={g.src} alt="" loading="lazy" />
            </figure>
          )}
        </div>
      </div>
    </section>);

}

window.Gallery = Gallery;