// Gallery.jsx — alternating full-bleed and two-up rows, hover overlay
function GalleryImage({ src, location }) {
  return (
    <a href="#contact" className="gal-tile">
      <div className="gal-tile-img" style={{ backgroundImage: `url(${src})` }} />
      <div className="gal-tile-overlay">
        <span className="gal-tile-loc">{location}</span>
      </div>
    </a>
  );
}

function Gallery() {
  return (
    <section className="section section-tight reveal" id="work">
      <div className="section-inner">
        <div className="services-head">
          <span className="eyebrow section-eyebrow">— Selected Work</span>
          <h2 className="section-h2">A look at recent<br/>media walls across<br/>Southern California.</h2>
        </div>
      </div>

      <div className="gal-fullbleed">
        <GalleryImage src="../../assets/work-fjord-fluted-niches.jpg" location="Irvine" />
      </div>

      <div className="gal-twoup">
        <GalleryImage src="../../assets/work-mont-saint-michel.jpg" location="Newport Beach" />
        <GalleryImage src="../../assets/work-pool-view.jpeg" location="Woodland Hills" />
      </div>

      <div className="gal-fullbleed">
        <GalleryImage src="../../assets/work-peacock-credenza.jpg" location="San Diego" />
      </div>

      <div className="gal-twoup">
        <GalleryImage src="../../assets/work-pool-view.jpeg" location="Costa Mesa" />
        <GalleryImage src="../../assets/work-fjord-fluted-niches.jpg" location="Mission Viejo" />
      </div>
    </section>
  );
}

window.Gallery = Gallery;