/* Origins.jsx — Bgvideo2 bg + Arsonic icon (mouse parallax) + 10 work circles */
function Origins() {
  const arsonicRef = React.useRef(null);

  React.useEffect(() => {
    const node = arsonicRef.current;
    if (!node) return;
    const onMove = (e) => {
      const r = node.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / window.innerWidth;
      const dy = (e.clientY - cy) / window.innerHeight;
      const px = Math.max(-1, Math.min(1, dx * 1.8));
      const py = Math.max(-1, Math.min(1, dy * 1.8));
      const inner = node.querySelector('img');
      if (inner) inner.style.transform = `translate(${px * 18}px, ${py * 18}px) scale(1.02)`;
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const works = [
    { src: 'assets/work-lumens.png',       label: 'Lumens', href: 'https://opensea.io/collection/lumens' },
    { src: 'assets/work-shapepepe.png',    label: 'Shape of Pepe', href: 'https://opensea.io/collection/theshapeofpepe' },
    { src: 'assets/work-systems.png',      label: 'Systems', href: 'https://opensea.io/collection/generativesystems' },
    { src: 'assets/work-beatboxes.png',    label: 'Beatboxes', href: 'https://opensea.io/collection/beatboxes-by-zeblocks' },
    { src: 'assets/work-sensthesia.png',   label: 'Sensthesia', href: 'https://opensea.io/collection/sensthesia' },
    { src: 'assets/work-budscape.png',     label: 'Budscapes', href: 'https://opensea.io/collection/budscapes' },
    { src: 'assets/work-pebbles.png',      label: 'Pebbles', href: 'https://opensea.io/collection/pebbles-by-zeblocks' },
    { src: 'assets/work-unigrids.png',     label: 'Unigrids', href: 'https://opensea.io/collection/unigrids-by-zeblocks' },
    { src: 'assets/work-noncestratum.png', label: 'NonceStratum', href: 'https://opensea.io/collection/unigrids-by-zeblocks' },
    { src: 'assets/work-6529.png',         label: '6529 Profile', href: 'https://6529.io/arsonic' },
  ];

  return (
    <section className="origins" id="origins">
      <video autoPlay muted loop playsInline>
        <source src="assets/Bgvideo2.mp4" type="video/mp4" />
      </video>

      <div className="origins-inner">
        <div className="arsonic" ref={arsonicRef}>
          <img src="assets/arsonicicon.svg" alt="Arsonic" />
        </div>
        <div className="copy">
          <h2>Origins</h2>
          <p>
            Arsonic is the creator and mind behind Sgt Pepe World. An artist, meme engineer, and pixel-powered visionary. Known for mixing internet lore, classic aesthetics, and internet absurdity, Arsonic builds entire worlds out of meme culture.
          </p>
          <p>
            His CC0-driven art invites everyone to take part, remix, and leave their mark. If it makes you laugh and think, it's probably Arsonic.
          </p>
          <div className="origins-works">
            <div className="works-grid">
              {works.map((w, i) => (
                <a className="work" key={i} href={w.href} target="_blank" rel="noreferrer">
                  <div className="circle">
                    <img src={w.src} alt={w.label} loading="lazy" />
                  </div>
                  <div className="label">{w.label}</div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Origins = Origins;