// Mouse interactivity — cursor spotlight, parallax layers, 3D tilt cards.
// All spring-smoothed via framer-motion motion values (no React re-renders
// on pointermove). Everything degrades gracefully on touch devices.

const { motion: fxMotion, useMotionValue, useSpring } = window.Motion;

// Only enable pointer-following effects for real mice/trackpads.
const FINE_POINTER =
  typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;

// Soft white glow that trails the cursor across the whole page.
function CursorGlow() {
  const x = useMotionValue(-600);
  const y = useMotionValue(-600);
  const spring = { stiffness: 150, damping: 20, mass: 0.4 };
  const sx = useSpring(x, spring);
  const sy = useSpring(y, spring);

  React.useEffect(() => {
    if (!FINE_POINTER) return;
    const onMove = (e) => {
      x.set(e.clientX);
      y.set(e.clientY);
    };
    window.addEventListener("pointermove", onMove);
    return () => window.removeEventListener("pointermove", onMove);
  }, []);

  if (!FINE_POINTER) return null;

  return (
    <fxMotion.div
      aria-hidden="true"
      className="fixed top-0 left-0 z-30 pointer-events-none"
      style={{
        x: sx,
        y: sy,
        width: 480,
        height: 480,
        marginLeft: -240,
        marginTop: -240,
        borderRadius: "50%",
        mixBlendMode: "screen",
        background:
          "radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 35%, rgba(255,255,255,0) 70%)",
      }}
    />
  );
}

// Wrapper that drifts its children toward (or away from, with negative
// strength) the pointer. Used for the background videos and hero content.
function ParallaxLayer({ children, strength = 20, className = "" }) {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const spring = { stiffness: 60, damping: 20, mass: 0.8 };
  const sx = useSpring(x, spring);
  const sy = useSpring(y, spring);

  React.useEffect(() => {
    if (!FINE_POINTER) return;
    const onMove = (e) => {
      x.set((e.clientX / window.innerWidth - 0.5) * strength);
      y.set((e.clientY / window.innerHeight - 0.5) * strength);
    };
    window.addEventListener("pointermove", onMove);
    return () => window.removeEventListener("pointermove", onMove);
  }, [strength]);

  return (
    <fxMotion.div className={className} style={{ x: sx, y: sy }}>
      {children}
    </fxMotion.div>
  );
}

// 3D tilt following the pointer inside the card, plus a light sheen that
// tracks the cursor position (clipped by the card's own overflow:hidden).
function TiltCard({ children, className = "", max = 8, sheen = true }) {
  const ref = React.useRef(null);
  const rx = useMotionValue(0);
  const ry = useMotionValue(0);
  const spring = { stiffness: 250, damping: 20 };
  const srx = useSpring(rx, spring);
  const sry = useSpring(ry, spring);

  const handlers = FINE_POINTER
    ? {
        onPointerMove: (e) => {
          const el = ref.current;
          if (!el) return;
          const r = el.getBoundingClientRect();
          const px = (e.clientX - r.left) / r.width - 0.5;
          const py = (e.clientY - r.top) / r.height - 0.5;
          ry.set(px * max);
          rx.set(-py * max);
          el.style.setProperty("--sheen-x", (px + 0.5) * 100 + "%");
          el.style.setProperty("--sheen-y", (py + 0.5) * 100 + "%");
        },
        onPointerLeave: () => {
          rx.set(0);
          ry.set(0);
        },
      }
    : {};

  return (
    <fxMotion.div
      ref={ref}
      className={"group " + className}
      style={{ rotateX: srx, rotateY: sry, transformPerspective: 900 }}
      {...handlers}
    >
      {sheen && FINE_POINTER && (
        <div
          aria-hidden="true"
          className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          style={{
            borderRadius: "inherit",
            background:
              "radial-gradient(340px circle at var(--sheen-x,50%) var(--sheen-y,50%), rgba(255,255,255,0.12), rgba(255,255,255,0) 60%)",
          }}
        />
      )}
      {children}
    </fxMotion.div>
  );
}

window.CursorGlow = CursorGlow;
window.ParallaxLayer = ParallaxLayer;
window.TiltCard = TiltCard;