/* BathroomGallery.jsx — Carousel + lightbox of finished bathroom projects.
   Drop more images into the IMAGES array as the user uploads them. */

const BathroomGallery = () => {
  const IMAGES = [
    { src: "uploads/bath1b-0645c01b.jpeg", caption: "Marble master bath — freestanding tub & walk-in shower" },
    { src: "uploads/bath1f-4912fc9e.jpeg", caption: "Galley layout — Calacatta marble & custom vanity" },
    { src: "uploads/bath1c.jpeg",          caption: "Walnut vanity with vessel sink & backlit mirror" },
    { src: "uploads/bath1d.jpeg",          caption: "Floating vanity with vertical wood-slat accent wall" },
    { src: "uploads/bath1e.jpeg",          caption: "Freestanding soaking tub with hex marble floor" },
    { src: "uploads/bath1g.jpg",           caption: "Double vanity with oval LED mirrors & gold fixtures" },
    { src: "uploads/bath1a.jpg",           caption: "Backlit mirror vanity with travertine accent wall" },
    { src: "uploads/bath1g.jpeg",          caption: "Marble walls with frosted-glass door entry" },
    { src: "uploads/bath1f.jpeg",          caption: "Marble shower with built-in niche" },
    { src: "uploads/bath1b.jpeg",          caption: "Floor-to-ceiling marble with glass enclosure" },
    { src: "uploads/bath2a.jpeg",          caption: "Herringbone shower with gold sliding-glass hardware" },
    { src: "uploads/bath3a.jpeg",          caption: "Vaulted-ceiling shower with marble mosaic & built-in seats" },
    { src: "uploads/bath4a.jpeg",          caption: "Blue herringbone shower with matte-black fixtures" },
    { src: "uploads/bath5a.jpeg",          caption: "Sage green powder room with white herringbone shower" },
    { src: "uploads/bath6a.jpeg",          caption: "Bold black-&-white pattern wall with mosaic shower" },
    { src: "uploads/bath7a.jpeg",          caption: "Forest-green double vanity with brass fixtures" },
    { src: "uploads/bath7b.jpeg",          caption: "Dramatic gray marble shower with brass details" },
    { src: "uploads/bath8a.jpeg",          caption: "Marble shower with black herringbone accent stripe" },
    { src: "uploads/bath9a.jpeg",          caption: "White double vanity with ornate gold-framed mirrors" },
    { src: "uploads/bath9b.jpeg",          caption: "Freestanding tub under crystal chandelier with skylight" },
    { src: "uploads/bath9c.jpeg",          caption: "Spa-like shower & tub with quatrefoil mosaic accent" },
    { src: "uploads/bath10a.jpeg",         caption: "Walnut double vanity with Carrara marble countertop" },
    { src: "uploads/bath10b.jpeg",         caption: "Compact full bath with tub-shower & marble walls" },
    { src: "uploads/bath11a.jpeg",         caption: "Dramatic blue-onyx shower with hex mosaic floor" },
    { src: "uploads/bath12a.jpeg",         caption: "Gray marble walk-in shower with brass rainhead" },
    { src: "uploads/bath13a.jpeg",         caption: "Modern bath with sliding-glass herringbone shower" },
    { src: "uploads/bath14a.jpeg",         caption: "Earth-toned slate shower with pebble-stone floor" },
    { src: "uploads/bath15a.jpeg",         caption: "White marble shower with brass dual-head fixtures" },
    { src: "uploads/bath16a.jpg",          caption: "Blue-onyx shower with chevron-niche & hex floor" },
    { src: "uploads/bath17a.jpeg",         caption: "Blue-marble shower — wide view with brass hardware" },
    { src: "uploads/bath17b.jpeg",         caption: "Blue-marble walk-in shower with hex tile floor" },
    { src: "uploads/bath18a.jpeg",         caption: "Earth-tone slate full bath with wood vanity" },
    { src: "uploads/bath18b.jpeg",         caption: "Slate shower with pebble-stone floor & frameless glass" }
  ];

  const [index, setIndex] = React.useState(0);
  const [lightbox, setLightbox] = React.useState(false);
  const len = IMAGES.length;

  const prev = (e) => { if (e) e.stopPropagation(); setIndex((i) => (i - 1 + len) % len); };
  const next = (e) => { if (e) e.stopPropagation(); setIndex((i) => (i + 1) % len); };

  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLightbox(false);
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [lightbox]);

  const cur = IMAGES[index];

  return (
    <section className="section section--alt" data-screen-label="bathroom-gallery">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 48, maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Recent work</div>
          <h2 className="section-title">Bathrooms we've built</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            A look at finished bathroom projects across North &amp; Central New Jersey. Click any photo to view it full-size.
          </p>
        </div>

        <div className="gallery">
          <button className="gallery__arrow gallery__arrow--prev" onClick={prev} aria-label="Previous photo">‹</button>
          <button className="gallery__stage" onClick={() => setLightbox(true)} aria-label="View full-size photo">
            <img src={cur.src} alt={cur.caption} className="gallery__img" />
            <div className="gallery__caption">
              <span>{cur.caption}</span>
              <span className="gallery__counter">{index + 1} / {len}</span>
            </div>
          </button>
          <button className="gallery__arrow gallery__arrow--next" onClick={next} aria-label="Next photo">›</button>
        </div>

        <div className="gallery__thumbs">
          {IMAGES.map((img, i) => (
            <button key={i}
              onClick={() => setIndex(i)}
              className={`gallery__thumb ${i === index ? "is-on" : ""}`}
              aria-label={`View photo ${i + 1}`}>
              <img src={img.src} alt="" />
            </button>
          ))}
        </div>
      </div>

      {lightbox && (
        <div className="lightbox" onClick={() => setLightbox(false)}>
          <button className="lightbox__close" onClick={() => setLightbox(false)} aria-label="Close">✕</button>
          <button className="lightbox__arrow lightbox__arrow--prev" onClick={prev} aria-label="Previous">‹</button>
          <img src={cur.src} alt={cur.caption} className="lightbox__img" onClick={(e) => e.stopPropagation()} />
          <button className="lightbox__arrow lightbox__arrow--next" onClick={next} aria-label="Next">›</button>
          <div className="lightbox__caption">{cur.caption} — {index + 1} / {len}</div>
        </div>
      )}
    </section>
  );
};

window.BathroomGallery = BathroomGallery;