"use client";

import { useRef, useState, useEffect } from "react";
import { motion } from "framer-motion";

/** Wraps a CTA so it subtly "sticks" to the cursor within its bounds. */
export function Magnetic({ children, strength = 0.3, className = "" }: { children: React.ReactNode; strength?: number; className?: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <motion.div
      ref={ref}
      onMouseMove={(e) => {
        const rect = ref.current?.getBoundingClientRect();
        if (!rect) return;
        setPos({
          x: (e.clientX - rect.left - rect.width / 2) * strength,
          y: (e.clientY - rect.top - rect.height / 2) * strength,
        });
      }}
      onMouseLeave={() => setPos({ x: 0, y: 0 })}
      animate={{ x: pos.x, y: pos.y }}
      transition={{ type: "spring", stiffness: 150, damping: 12, mass: 0.15 }}
      className={`inline-block ${className}`}
    >
      {children}
    </motion.div>
  );
}

/** Cursor-driven 3D tilt — wrap any card for a subtle parallax-tilt on hover. */
export function TiltCard({ children, className = "", max = 8 }: { children: React.ReactNode; className?: string; max?: number }) {
  const ref = useRef<HTMLDivElement>(null);
  const [rotate, setRotate] = useState({ x: 0, y: 0 });
  const [scale, setScale] = useState(1);

  return (
    <motion.div
      ref={ref}
      onMouseMove={(e) => {
        const rect = ref.current?.getBoundingClientRect();
        if (!rect) return;
        const px = (e.clientX - rect.left) / rect.width - 0.5;
        const py = (e.clientY - rect.top) / rect.height - 0.5;
        setRotate({ x: -py * max, y: px * max });
      }}
      onMouseEnter={() => setScale(1.02)}
      onMouseLeave={() => { setRotate({ x: 0, y: 0 }); setScale(1); }}
      animate={{ rotateX: rotate.x, rotateY: rotate.y, scale }}
      transition={{ type: "spring", stiffness: 200, damping: 20 }}
      style={{ transformPerspective: 800 }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

/** Infinite seamless horizontal scroll — for logo/trust strips. */
export function Marquee({ items, duration = 24, className = "" }: { items: string[]; duration?: number; className?: string }) {
  return (
    <div className="overflow-hidden w-full">
      <motion.div
        className={`flex items-center gap-16 whitespace-nowrap w-max ${className}`}
        animate={{ x: ["0%", "-50%"] }}
        transition={{ duration, repeat: Infinity, ease: "linear" }}
      >
        {[...items, ...items].map((item, i) => (
          <span key={i}>{item}</span>
        ))}
      </motion.div>
    </div>
  );
}

/** Slowly animated gradient fill for headline text. */
export function GradientText({ children, gradient, className = "" }: { children: React.ReactNode; gradient: string; className?: string }) {
  return (
    <motion.span
      className={`bg-clip-text text-transparent inline-block ${className}`}
      style={{ backgroundImage: gradient, backgroundSize: "200% 100%" }}
      animate={{ backgroundPositionX: ["0%", "100%", "0%"] }}
      transition={{ duration: 7, repeat: Infinity, ease: "linear" }}
    >
      {children}
    </motion.span>
  );
}

/**
 * Soft radial glow that follows the cursor — for dark sections.
 * Tracks mousemove on the parent element so it never blocks clicks on real content.
 */
export function CursorSpotlight({ color = "rgba(255,255,255,0.06)" }: { color?: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ x: 50, y: 50 });

  useEffect(() => {
    const parent = ref.current?.parentElement;
    if (!parent) return;
    const handle = (e: MouseEvent) => {
      const rect = parent.getBoundingClientRect();
      setPos({ x: ((e.clientX - rect.left) / rect.width) * 100, y: ((e.clientY - rect.top) / rect.height) * 100 });
    };
    parent.addEventListener("mousemove", handle);
    return () => parent.removeEventListener("mousemove", handle);
  }, []);

  return (
    <div
      ref={ref}
      className="absolute inset-0 pointer-events-none"
      style={{ background: `radial-gradient(500px circle at ${pos.x}% ${pos.y}%, ${color}, transparent 70%)` }}
    />
  );
}

/** Word-by-word stagger reveal for headlines. */
export function StaggerWords({ text, className = "", delay = 0 }: { text: string; className?: string; delay?: number }) {
  const words = text.split(" ");
  return (
    <span className={className}>
      {words.map((w, i) => (
        <motion.span
          key={i}
          className="inline-block"
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: delay + i * 0.06 }}
        >
          {w}{i < words.length - 1 ? " " : ""}
        </motion.span>
      ))}
    </span>
  );
}