function Gallery({ tweaks, onCTA }) {
  const tiles = [
    { src: "uploads/1.png", label: "Blue siding home — new windows installed" },
    { src: "uploads/2.png", label: "Ranch home exterior — full window replacement" },
    { src: "uploads/3.png", label: "Blue siding home — octagon & sliding windows" },
    { src: "uploads/4.png", label: "Stucco home — corner window installation" },
    { src: "uploads/5.png", label: "Stucco home — grid windows close-up" },
    { src: "uploads/6.png", label: "Metal building — commercial window install" },
    { src: "uploads/7.png", label: "Two-story home — full exterior replacement" },
    { src: "uploads/8.png", label: "Stucco home — large picture windows" },
  ];

  const [lbIndex, setLbIndex] = React.useState(null);
  const open = lbIndex !== null;

  const openAt = (i) => setLbIndex(i);
  const close = () => setLbIndex(null);
  const prev = React.useCallback(
    () => setLbIndex((i) => (i === null ? i : (i - 1 + tiles.length) % tiles.length)),
    [tiles.length]
  );
  const next = React.useCallback(
    () => setLbIndex((i) => (i === null ? i : (i + 1) % tiles.length)),
    [tiles.length]
  );

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') close();
      else if (e.key === 'ArrowLeft') prev();
      else if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open, prev, next]);

  return (
    <section className="section" id="gallery">
      <div className="container">
        <div className="gallery-intro">
          <span className="eyebrow">Project Gallery</span>
          <h2 className="h2" style={{marginTop:16}}>1,000+ windows installed across <em>Greater Sacramento.</em></h2>
          <p className="lead gallery-sub">See the quality of our work — real window replacements completed for homeowners just like you.</p>
        </div>

        <div className="masonry" style={{marginTop:36}}>
          {tiles.map((t, i) => (
            <div
              className="tile"
              key={i}
              style={{aspectRatio: "4/3"}}
              onClick={() => openAt(i)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openAt(i); } }}
              aria-label={`Open image: ${t.label}`}
            >
              <img src={t.src} alt={t.label} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
              <div className="tile-meta">
                <span className="c">Sacramento Area</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{display:'flex', justifyContent:'center', marginTop:36}}>
          <button className="btn btn-primary btn-lg" onClick={onCTA}>
            Get Free Estimate &amp; Offer <Ic.arrow />
          </button>
        </div>
      </div>

      {open && ReactDOM.createPortal(
        <div className="lb-backdrop" onClick={close} role="dialog" aria-modal="true" aria-label="Gallery image viewer">
          <button className="lb-close" onClick={(e) => { e.stopPropagation(); close(); }} aria-label="Close">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>

          <button className="lb-nav lb-nav--prev" onClick={(e) => { e.stopPropagation(); prev(); }} aria-label="Previous image">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 18 9 12 15 6" />
            </svg>
          </button>
          <button className="lb-nav lb-nav--next" onClick={(e) => { e.stopPropagation(); next(); }} aria-label="Next image">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </button>

          <div className="lb-stage" onClick={(e) => e.stopPropagation()}>
            <div className="lb-media">
              <img
                key={lbIndex}
                src={tiles[lbIndex].src}
                alt={tiles[lbIndex].label}
                className="lb-image"
              />
            </div>
            <div className="lb-caption">
              <div>
                <div className="lb-caption-title">{tiles[lbIndex].label}</div>
                <div className="lb-caption-meta">Sacramento Area · Elevate Construction Group</div>
              </div>
              <div className="lb-counter">{lbIndex + 1} / {tiles.length}</div>
            </div>
          </div>
        </div>,
        document.body
      )}
    </section>
  );
}
window.Gallery = Gallery;