// Custom cursor — small green dot with a soft radial-gradient glow, replaces the system cursor on desktop.
const CursorFX = () => {
  const dotRef = React.useRef(null);
  const glowRef = React.useRef(null);

  React.useEffect(() => {
    const isFinePointer = window.matchMedia("(pointer: fine)").matches;
    if (!isFinePointer) return;

    document.body.classList.add("ev-cursor-active");

    const onMove = (e) => {
      const { clientX: x, clientY: y } = e;
      if (dotRef.current) { dotRef.current.style.transform = `translate(${x}px, ${y}px)`; dotRef.current.style.opacity = "1"; }
      if (glowRef.current) { glowRef.current.style.transform = `translate(${x}px, ${y}px)`; glowRef.current.style.opacity = "1"; }
    };
    const onLeave = () => {
      if (dotRef.current) dotRef.current.style.opacity = "0";
      if (glowRef.current) glowRef.current.style.opacity = "0";
    };
    const onEnter = () => {
      if (dotRef.current) dotRef.current.style.opacity = "1";
      if (glowRef.current) glowRef.current.style.opacity = "1";
    };

    window.addEventListener("mousemove", onMove);
    document.addEventListener("mouseleave", onLeave);
    document.addEventListener("mouseenter", onEnter);

    return () => {
      document.body.classList.remove("ev-cursor-active");
      window.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseleave", onLeave);
      document.removeEventListener("mouseenter", onEnter);
    };
  }, []);

  return (
    <>
      <div ref={glowRef} aria-hidden="true" style={{
        position: "fixed", left: 0, top: 0,
        width: 260, height: 260, marginLeft: -130, marginTop: -130,
        borderRadius: "50%", pointerEvents: "none", zIndex: 10000,
        background: "radial-gradient(circle, rgba(87,255,135,0.20) 0%, rgba(9,169,85,0.08) 40%, rgba(9,169,85,0) 70%)",
        opacity: 0,
        transition: "opacity .25s ease",
      }} />
      <div ref={dotRef} aria-hidden="true" style={{
        position: "fixed", left: 0, top: 0,
        width: 7, height: 7, marginLeft: -3.5, marginTop: -3.5,
        borderRadius: "50%", pointerEvents: "none", zIndex: 10001,
        background: "#57ff87",
        boxShadow: "0 0 12px rgba(87,255,135,0.9), 0 0 24px rgba(9,169,85,0.6)",
        opacity: 0,
        transition: "opacity .25s ease",
      }} />
    </>
  );
};

window.CursorFX = CursorFX;