/* gradient.jsx — Holo-Hintergrund (cursor-reaktiv) + animiertes #-Feld */
const { useEffect, useRef, useState } = React;

/* Fixed, animated holographic background. Cursor moves the --cx/--cy blob. */
function HoloBackground() {
  const ref = useRef(null);
  useEffect(() => {
    let raf, tx = innerWidth / 2, ty = innerHeight / 2, cx = tx, cy = ty;
    let lastX = null, lastY = null;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const el = document.documentElement;
    const tick = () => {
      cx += (tx - cx) * 0.08; cy += (ty - cy) * 0.08;
      // nur bei echter Änderung schreiben (auf Ganzzahl gerundet) — vermeidet,
      // dass die per-Frame Style-Invalidierung die Seiten-Einblendung aushungert
      const rx = Math.round(cx), ry = Math.round(cy);
      if (rx !== lastX || ry !== lastY) {
        lastX = rx; lastY = ry;
        el.style.setProperty('--cx', rx + 'px');
        el.style.setProperty('--cy', ry + 'px');
      }
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener('pointermove', onMove, { passive: true });
    // erst nach 2 Frames starten, damit die page-enter Animation zuerst
    // einen Startzeitpunkt bekommt (sonst bleibt sie in Chromium "pending")
    raf = requestAnimationFrame(() => { raf = requestAnimationFrame(tick); });
    return () => { cancelAnimationFrame(raf); window.removeEventListener('pointermove', onMove); };
  }, []);
  return (
    <div className="holo-bg" ref={ref} aria-hidden="true">
      <div className="holo-blob b1"></div>
      <div className="holo-blob b2"></div>
      <div className="holo-blob b3"></div>
      <div className="holo-blob b4"></div>
      <div className="holo-cursor"></div>
    </div>
  );
}

/* Floating # marks with scroll-parallax. count + show via props */
function HashField({ show = true, count = 7 }) {
  const layerRef = useRef(null);
  const marks = useRef(
    Array.from({ length: count }).map((_, i) => ({
      left: (i * 53 + 12) % 96,
      top: (i * 37 + 8) % 92,
      size: 40 + ((i * 29) % 90),
      depth: 0.15 + ((i * 13) % 60) / 100,
      rot: (i * 47) % 60 - 30,
    }))
  );
  useEffect(() => {
    if (!show) return;
    let raf;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        const nodes = layerRef.current?.children || [];
        for (let i = 0; i < nodes.length; i++) {
          const d = marks.current[i].depth;
          nodes[i].style.transform =
            `translateY(${-y * d}px) rotate(${marks.current[i].rot}deg)`;
        }
        raf = 0;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [show]);
  if (!show) return null;
  return (
    <div ref={layerRef} aria-hidden="true"
      style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      {marks.current.map((m, i) => (
        <span key={i} style={{
          position: 'absolute', left: m.left + 'vw', top: m.top + 'vh',
          fontSize: m.size + 'px', fontWeight: 900, lineHeight: 1,
          color: 'transparent', WebkitTextStroke: '1px var(--line)',
          opacity: 0.5, fontFamily: 'Archivo, sans-serif',
          transform: `rotate(${m.rot}deg)`, willChange: 'transform',
        }}>#</span>
      ))}
    </div>
  );
}

Object.assign(window, { HoloBackground, HashField });