// Gallery.jsx — polaroid slideshow

function Gallery() {
  const photos = useLL('gallery') || [];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    if (!photos.length) return;
    const id = setInterval(() => setIdx(i => (i + 1) % photos.length), 4000);
    return () => clearInterval(id);
  }, [photos.length]);
  if (!photos.length) return null;

  return (
    <section id="gallery" className="sec-cream" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Gallery ✿ Những khoảnh khắc</span>
          <h2>Album kỷ niệm</h2>
          <div className="sub">từng chút một, từng ngày một</div>
        </div>

        <div className="reveal" data-rv="zoom" style={{
          position: 'relative', height: 480, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
        }}>
          {photos.map((p, i) => {
            const offset = ((i - idx) + photos.length) % photos.length;
            const centered = offset === 0 || offset === photos.length;
            const showAs = offset > 2 ? offset - photos.length : offset;
            const isVisible = Math.abs(showAs) <= 2;
            return (
              <div key={i} style={{
                position: 'absolute',
                transform: `translateX(${showAs * 240}px) rotate(${showAs * 6}deg) scale(${centered ? 1 : 0.82})`,
                opacity: isVisible ? (centered ? 1 : 0.6) : 0,
                transition: 'all .8s cubic-bezier(.34,1.56,.64,1)',
                zIndex: centered ? 10 : 10 - Math.abs(showAs),
              }}>
                <div className="polaroid" style={{ width: 300 }}>
                  <div className="photo" style={{ height: 320, background: p.bg }}>
                    <img src={`assets/icons/${p.icon}.svg`} style={{ width: 120, height: 120, opacity: .9 }}/>
                  </div>
                  <div className="caption">{p.label}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 32 }}>
          {photos.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{
              width: i === idx ? 24 : 8, height: 8, borderRadius: 4,
              background: i === idx ? 'var(--pink-500)' : 'var(--pink-200)',
              border: 'none', cursor: 'pointer', transition: 'all .3s',
            }}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;