// Fondo ambiental "liquid glass" para toda la web: un par de manchas de luz
// fijas y muy difuminadas dan atmósfera constante (visibles en cualquier
// sección, no se mueven con el scroll), y una mancha adicional persigue al
// cursor con un pequeño retraso elástico, cambiando de forma sin parar.
// Solo se activa en dispositivos con cursor real (ratón/trackpad); en
// táctil ni siquiera se engancha el listener.
function FondoLiquido() {
  const { useRef: useRefBg, useEffect: useEffectBg } = React;
  const cursorWrapRef = useRefBg(null);
  const bgRef = useRefBg(null);

  useEffectBg(() => {
    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return undefined;
    const el = cursorWrapRef.current;
    if (!el) return undefined;

    let targetX = window.innerWidth / 2;
    let targetY = window.innerHeight / 2;
    let x = targetX;
    let y = targetY;
    let raf = null;

    const onMove = (e) => { targetX = e.clientX; targetY = e.clientY; };
    window.addEventListener('mousemove', onMove, { passive: true });

    const tick = () => {
      x += (targetX - x) * 0.08;
      y += (targetY - y) * 0.08;
      el.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

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

  // Pausa el morphing de las manchas de fondo mientras se hace scroll: son
  // capas fixed y difuminadas, y repintarlas en cada frame de scroll es lo
  // que causaba el tirón al bajar por la página.
  useEffectBg(() => {
    const bg = bgRef.current;
    if (!bg) return undefined;
    let timeoutId = null;
    const onScroll = () => {
      bg.classList.add('is-scrolling');
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => bg.classList.remove('is-scrolling'), 150);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      clearTimeout(timeoutId);
    };
  }, []);

  return (
    <div className="liquid-bg" aria-hidden="true" ref={bgRef}>
      <div className="liquid-bg__blob liquid-bg__blob--1"></div>
      <div className="liquid-bg__blob liquid-bg__blob--2"></div>
      <div className="liquid-bg__blob liquid-bg__blob--3"></div>
      <div className="liquid-bg__cursor-wrap" ref={cursorWrapRef}>
        <div className="liquid-bg__cursor"></div>
      </div>
    </div>
  );
}