/* Collectibles.jsx — vertical infinite-loop product showcase
   Per brief: "images continuously move upward, each image transitions into the next, loop infinitely" */
const { useState: useCState, useEffect: useCEffect } = React;

function Collectibles() {
  const merch = [
    'assets/merch1.jpg', 'assets/merch2.jpg', 'assets/merch3.jpg', 'assets/merch4.jpg',
    'assets/merch5.jpg', 'assets/merch6.jpg', 'assets/merch7.jpg', 'assets/merch8.jpg',
    'assets/merch9.jpg', 'assets/merch10.jpg',
  ];
  const [active, setActive] = useCState(0);
  useCEffect(() => {
    const t = setInterval(() => {
      setActive(a => (a + 1) % merch.length);
    }, 1400);
    return () => clearInterval(t);
  }, [merch.length]);

  return (
    <section className="collect dotbg" id="collectibles">
      <video className="collect-video" autoPlay muted loop playsInline>
        <source src="assets/Bgvideo3.mp4" type="video/mp4" />
      </video>
      <div className="collect-overlay" />
      <div className="collect-inner">
        <div className="copy-left">
          <h2>Collectibles<br />from Sgt Pepe's<br />World</h2>
          <a href="https://opensea.io/item/ethereum/0x33fd426905f149f8376e227d0c9d3340aad17af1/37" className="btn" target="_blank" rel="noreferrer">get yours now</a>
        </div>

        <div className="collect-stack">
          {merch.map((src, i) => (
            <div key={i} className={'slot' + (i === active ? ' active' : '')}>
              <img src={src} alt="" />
            </div>
          ))}
        </div>

        <div className="copy-right">
          <p>The world of Sgt Pepe does not live only on screens.</p>
          <p>From everyday gear to premium physical releases, the Airbase is where digital lore becomes something you can wear, hold, collect, and pass around.</p>
          <p>Explore T shirts, socks, limited drops, the ABC book, and the deluxe comic book package telling the origin lore of Sgt Pepe.</p>
        </div>
      </div>
    </section>
  );
}
window.Collectibles = Collectibles;