// Depth Field — fixed-position layered background that sits BEHIND all content.
// Three depth planes drift on mouse + scroll at different rates, so when you scroll
// or hover, foreground glass cards visibly float in front of a real world that
// extends past the page edges.

const DepthField = () => {
  const farRef = React.useRef(null);
  const midRef = React.useRef(null);
  const nearRef = React.useRef(null);
  const gridRef = React.useRef(null);
  const stateRef = React.useRef({ mx: 0, my: 0, sy: 0 });

  React.useEffect(() => {
    const s = stateRef.current;
    const onMove = (e) => {
      // -0.5 .. +0.5 across viewport
      s.mx = (e.clientX / window.innerWidth) - 0.5;
      s.my = (e.clientY / window.innerHeight) - 0.5;
    };
    const onScroll = () => { s.sy = window.scrollY; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('scroll', onScroll, { passive: true });

    let raf;
    const tick = () => {
      // Far plane — slow, large parallax range
      if (farRef.current) {
        farRef.current.style.transform =
          `translate3d(${(s.mx * -36).toFixed(2)}px, ${(s.my * -28 + s.sy * -0.05).toFixed(2)}px, 0)`;
      }
      // Mid plane — medium drift
      if (midRef.current) {
        midRef.current.style.transform =
          `translate3d(${(s.mx * -64).toFixed(2)}px, ${(s.my * -48 + s.sy * -0.12).toFixed(2)}px, 0)`;
      }
      // Near plane — strongest parallax (closer to viewer)
      if (nearRef.current) {
        nearRef.current.style.transform =
          `translate3d(${(s.mx * -110).toFixed(2)}px, ${(s.my * -82 + s.sy * -0.22).toFixed(2)}px, 0)`;
      }
      // Grid drifts subtly with cursor only (anchored vertically)
      if (gridRef.current) {
        gridRef.current.style.transform =
          `translate3d(${(s.mx * -20).toFixed(2)}px, ${(s.my * -14).toFixed(2)}px, 0)`;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

  return (
    <div className="depth-field" aria-hidden="true">
      {/* Far plane — huge soft accent orbs, deep blur */}
      <div ref={farRef} className="df-plane df-far">
        <div className="df-orb df-orb-1" />
        <div className="df-orb df-orb-2" />
        <div className="df-orb df-orb-3" />
      </div>

      {/* Grid plane — faint world grid behind everything */}
      <div ref={gridRef} className="df-plane df-grid" />

      {/* Mid plane — sharper accent forms */}
      <div ref={midRef} className="df-plane df-mid">
        <div className="df-orb df-orb-4" />
        <div className="df-orb df-orb-5" />
      </div>

      {/* Near plane — small bright specks, like dust in light */}
      <div ref={nearRef} className="df-plane df-near">
        {Array.from({ length: 14 }).map((_, i) => (
          <span key={i} className="df-speck" style={{
            left:  `${(i * 73 + 7) % 100}%`,
            top:   `${(i * 41 + 13) % 100}%`,
            animationDelay: `${(i * 0.7) % 6}s`,
          }} />
        ))}
      </div>
    </div>
  );
};

window.DepthField = DepthField;