/* KitchenGallery.jsx — Carousel + lightbox of finished kitchen projects. */

const KitchenGallery = () => {
  const IMAGES = [
    { src: "uploads/kitchen15a.jpeg", caption: "Luxury open-concept kitchen — quartz waterfall island & gold hardware" },
    { src: "uploads/kitchen11.jpeg",  caption: "Large white shaker kitchen — quartz island & black pendants" },
    { src: "uploads/kitchen10a.JPG", caption: "Bright white kitchen with grey penny-tile backsplash & black pulls" },
    { src: "uploads/kitchen10b.jpg", caption: "Same kitchen — island angle with hardwood plank floor" },
    { src: "uploads/kitchen3.jpg",   caption: "Compact white kitchen with dramatic marble backsplash & floor" },
    { src: "uploads/kitchen12.JPG",  caption: "U-shaped white kitchen with marble counter & matching tile floor" },
    { src: "uploads/kitchen5a.JPG", caption: "White shaker kitchen under a crystal chandelier — marble backsplash" },
    { src: "uploads/kitchen6.JPG",   caption: "White shaker with marble backsplash, gold sconces & hardwood floor" },
    { src: "uploads/kitchen1.jpg",   caption: "White cabinets with dark subway backsplash & granite island" },
    { src: "uploads/kitchen4.jpg",   caption: "White shaker with bold black subway tile & marble tile floor" },
    { src: "uploads/kitchen15b.jpeg", caption: "Black subway tile kitchen with marble tile floor" },
    { src: "uploads/kitchen9.jpeg",  caption: "Black-granite island kitchen with marble tile & subway backsplash" },
    { src: "uploads/kitchen8.jpeg",  caption: "Same kitchen — opposite angle showing stair access" },
    { src: "uploads/kitchen7.jpeg",  caption: "Modern white shaker with black countertop and LVP transition" },
    { src: "uploads/kitchen5b.jpg",  caption: "Galley kitchen with black subway tile & white quartz counter" }
  ];

  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="kitchen-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">Kitchens we've built</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            A look at finished kitchen 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.KitchenGallery = KitchenGallery;