// ShopSlider.jsx — real-photo slider of the AQUO watershop
function ShopSlider() {
  const slides = [
    { src: 'img/shop/04-storefront.jpg', tag: 'EXT · 01', title: 'Storefront',           note: 'Wave-wrap signage, refill counter at street level.' },
    { src: 'img/shop/01-entrance.jpg',   tag: 'EXT · 02', title: 'Entrance',             note: 'Doorway into the floor — cool LED strip above the threshold.' },
    { src: 'img/shop/03-tank.jpg',       tag: 'SYS · 01', title: 'Storage tank',         note: 'Stainless holding tank — polished to spec, warning-rated.' },
    { src: 'img/shop/07-rig.jpg',        tag: 'SYS · 02', title: 'RO rig · wide',        note: 'Mural + blue pipework + the full filtration wall.' },
    { src: 'img/shop/08-filters.jpg',    tag: 'SYS · 03', title: 'Filter bank',          note: 'Pressure vessels, flow meters, mineral stages.' },
    { src: 'img/shop/09-floor.jpg',      tag: 'INT · 02', title: 'Floor view',           note: 'Stock pallets, refill spines, the rig flanking the back wall.' },
    { src: 'img/shop/02-bottles.jpg',    tag: 'RET · 01', title: 'Bottle aisle',         note: 'Glass, aluminium, sport — everything refillable in one run.' },
    { src: 'img/shop/06-stock.jpg',      tag: 'RET · 02', title: 'Stockroom',            note: 'Mountain Falls cases staged for morning delivery.' },
    { src: 'img/shop/10-window.jpg',     tag: 'EXT · 03', title: 'Window display',       note: 'Gravity dispensers and ceramic purifiers, visible from the street.' },
  ];

  const [idx, setIdx] = React.useState(0);
  const [mode, setMode] = React.useState('carousel'); // carousel | mosaic
  const [hoverNav, setHoverNav] = React.useState(null);
  const trackRef = React.useRef(null);

  // auto-advance when idle
  React.useEffect(() => {
    if (mode !== 'carousel') return;
    const t = setInterval(() => setIdx(i => (i + 1) % slides.length), 6500);
    return () => clearInterval(t);
  }, [mode, slides.length]);

  // keyboard
  React.useEffect(() => {
    const onKey = (e) => {
      if (mode !== 'carousel') return;
      if (e.key === 'ArrowLeft')  setIdx(i => (i - 1 + slides.length) % slides.length);
      if (e.key === 'ArrowRight') setIdx(i => (i + 1) % slides.length);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [mode, slides.length]);

  const go = (delta) => setIdx(i => (i + delta + slides.length) % slides.length);
  const current = slides[idx];

  return (
    <section className="section shop-section" data-screen-label="03 Watershop">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Inside — AQUO flagship</div>
            <h2 className="section-title">
              The <span className="outline">watershop</span>,<br/>
              room by <span className="glow">room.</span>
            </h2>
          </div>
          <div className="shop-head-right">
            <p className="section-note">
              Real photos from the floor — the RO rig, the counter, the refill
              aisle. This is where the water is actually made.
            </p>
            <div className="shop-mode">
              <button className={`shop-mode-btn${mode === 'carousel' ? ' active' : ''}`}
                      onClick={() => setMode('carousel')}>Carousel</button>
              <button className={`shop-mode-btn${mode === 'mosaic' ? ' active' : ''}`}
                      onClick={() => setMode('mosaic')}>Mosaic</button>
            </div>
          </div>
        </div>

        {mode === 'carousel' ? (
          <div className="shop-stage">
            <div className="shop-frame">
              <span className="corner tl" /><span className="corner tr" />
              <span className="corner bl" /><span className="corner br" />

              <div className="shop-hud">
                <span className="mono">{current.tag}</span>
                <span className="mono live">REC · {String(idx + 1).padStart(2,'0')}/{String(slides.length).padStart(2,'0')}</span>
              </div>

              <div className="shop-track" ref={trackRef}
                   style={{ transform: `translateX(-${idx * 100}%)` }}>
                {slides.map((s, i) => (
                  <div className="shop-slide" key={i}>
                    <img src={s.src} alt={s.title} loading={Math.abs(i - idx) > 1 ? 'lazy' : 'eager'} />
                  </div>
                ))}
              </div>

              <div className="shop-caption">
                <div className="cap-title">{current.title}</div>
                <div className="cap-note">{current.note}</div>
              </div>

              <button className="shop-nav prev"
                      onMouseEnter={() => setHoverNav('prev')}
                      onMouseLeave={() => setHoverNav(null)}
                      onClick={() => go(-1)}
                      aria-label="Previous">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M15 6l-6 6 6 6"/></svg>
              </button>
              <button className="shop-nav next"
                      onMouseEnter={() => setHoverNav('next')}
                      onMouseLeave={() => setHoverNav(null)}
                      onClick={() => go(1)}
                      aria-label="Next">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M9 6l6 6-6 6"/></svg>
              </button>

              <div className="shop-progress">
                <div className="shop-progress-bar" style={{ width: `${((idx + 1) / slides.length) * 100}%` }} />
              </div>
            </div>

            <div className="shop-thumbs">
              {slides.map((s, i) => (
                <button key={i}
                        className={`shop-thumb${i === idx ? ' active' : ''}`}
                        onClick={() => setIdx(i)}
                        aria-label={`Go to ${s.title}`}>
                  <img src={s.src} alt="" loading="lazy" />
                  <span className="thumb-num">{String(i + 1).padStart(2, '0')}</span>
                </button>
              ))}
            </div>
          </div>
        ) : (
          <div className="shop-mosaic">
            {slides.map((s, i) => (
              <figure className={`mos-tile mos-${i % 6}`} key={i}
                      onClick={() => { setIdx(i); setMode('carousel'); }}>
                <img src={s.src} alt={s.title} loading="lazy" />
                <figcaption>
                  <span className="mono">{s.tag}</span>
                  <span className="t">{s.title}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

window.ShopSlider = ShopSlider;