// effects.jsx — CursorGlow + ScrollTint ambient layer
const { useRef: useRX, useEffect: useEX } = React;

/* ——— Soft cursor halo ——— */
function CursorGlow({ motion }) {
  const ref = useRX(null);
  useEX(() => {
    if (motion === 'off') return;
    const el = ref.current; if (!el) return;
    let cx = window.innerWidth / 2, cy = window.innerHeight / 2;
    let tx = cx, ty = cy;
    let raf;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    window.addEventListener('pointermove', onMove);
    const tick = () => {
      cx += (tx - cx) * 0.10;
      cy += (ty - cy) * 0.10;
      el.style.transform = `translate(${cx - 220}px, ${cy - 220}px)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('pointermove', onMove);
    };
  }, [motion]);

  if (motion === 'off') return null;
  return (
    <div ref={ref} aria-hidden="true" style={{
      position: 'fixed', top: 0, left: 0, zIndex: 3,
      pointerEvents: 'none', width: 440, height: 440, borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(var(--glow-a),0.11) 0%, rgba(var(--glow-a),0.04) 45%, transparent 70%)',
      mixBlendMode: 'screen',
      willChange: 'transform',
    }} />
  );
}

/* ——— Scroll-driven warm tint — page warms subtly as you descend ——— */
function ScrollTint() {
  const ref = useRX(null);
  useEX(() => {
    const el = ref.current; if (!el) return;
    const onScroll = () => {
      const max = document.body.scrollHeight - window.innerHeight || 1;
      const p   = Math.min(window.scrollY / max, 1);
      el.style.opacity = (p * 0.09).toFixed(3);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div ref={ref} aria-hidden="true" style={{
      position: 'fixed', inset: 0, zIndex: 1, pointerEvents: 'none',
      background: 'linear-gradient(to bottom, rgba(var(--glow-c),0) 0%, rgba(var(--glow-c),1) 100%)',
      opacity: 0, transition: 'opacity .4s ease',
    }} />
  );
}

Object.assign(window, { CursorGlow, ScrollTint });