/* FlooringGallery.jsx — Carousel + lightbox of finished flooring projects. */

const FlooringGallery = () => {
  const IMAGES = [
    { src: "uploads/floor14.jpeg", caption: "Dark-stained oak hardwood with wainscoting" },
    { src: "uploads/floor10.JPG",  caption: "Wide-plank LVP open-concept living & dining" },
    { src: "uploads/floor11.jpg",  caption: "Light wash oak refinish — bright modern living space" },
    { src: "uploads/floor12.jpeg", caption: "Multi-family unit — luxury vinyl plank throughout" },
    { src: "uploads/floor13.jpeg", caption: "Refinished red-oak stair treads with dark stain" },
    { src: "uploads/floor1.jpg",   caption: "LVP install — open entryway with cool-tone planks" },
    { src: "uploads/floor2.jpg",   caption: "Refinished red oak hardwood — warm gunstock stain" },
    { src: "uploads/floor3.jpg",   caption: "Wide-plank herringbone parquet in a bay-window living room" },
    { src: "uploads/floor4.jpeg",  caption: "Custom LVP stair treads with riser detail" },
    { src: "uploads/floor5.jpeg",  caption: "Hand-scraped hardwood basement living space" },
    { src: "uploads/floor6.jpeg",  caption: "Gunstock oak hardwood meets marble fireplace surround" },
    { src: "uploads/floor7.jpeg",  caption: "Refinished hardwood foyer staircase with chandelier" },
    { src: "uploads/floor8.jpeg",  caption: "Marble floor entry with hardwood stair descent" },
    { src: "uploads/floor15.jpg",  caption: "Marble tile hallway with black inlay border & sun medallion" },
    { src: "uploads/floor16.jpg",  caption: "Calacatta marble tile install — finished basement" },
    { src: "uploads/floor17.jpg",  caption: "Carrara marble-look porcelain tile in a modern kitchen" },
    { src: "uploads/floor18.jpeg", caption: "Hardwood plank flooring in a custom shaker kitchen" },
    { src: "uploads/floor19.jpg",  caption: "White marble tile kitchen with black granite island" },
    { src: "uploads/floor20.jpg",  caption: "Marble tile meets LVP — transitional kitchen layout" },
    { src: "uploads/floor21.JPG",  caption: "LVP wide-plank in a city-view open-concept loft" }
  ];

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