'use client'

import { useState, MouseEvent } from 'react'
import { motion } from 'framer-motion'

export function DynamicSpotlightCTA() {
  const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null)
  const text = 'Unlock Your Motion Power'
  const intensity = 0.9
  const radius = 250

  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top
    setMousePosition({ x, y })
  }

  const handleMouseLeave = () => {
    setMousePosition(null)
  }

  return (
    <div
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className="relative h-96 w-full overflow-hidden rounded-2xl border border-border"
    >
      <div className="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900" />
      <div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-br from-purple-500/10 via-blue-500/10 to-indigo-500/10" />
      <div className="absolute inset-0">
        <div className="absolute top-0 left-0 h-1/2 w-full bg-gradient-to-b from-transparent via-purple-500/20 to-transparent" />
        <div className="absolute bottom-0 right-0 h-1/2 w-full bg-gradient-to-t from-transparent via-blue-500/20 to-transparent" />
      </div>
      <div className="relative h-full flex items-center justify-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
          className="relative"
        >
          <h1 className="text-5xl md:text-6xl font-bold text-center">
            <span className="bg-gradient-to-r from-purple-400 via-blue-400 to-cyan-400 bg-clip-text text-transparent">
              {text}
            </span>
          </h1>
        </motion.div>
      </div>
      {mousePosition && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: intensity }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
          className="absolute inset-0 pointer-events-none"
          style={{
            background: `radial-gradient(circle ${radius}px at ${mousePosition.x}px ${mousePosition.y}px, 
              rgba(255, 255, 255, 0.4) 0%, 
              rgba(255, 255, 255, 0.2) 30%, 
              rgba(255, 255, 255, 0) 70%)`,
            mixBlendMode: 'overlay',
          }}
        >
          <motion.div
            animate={{
              background: [
                'radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)',
                'radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%)',
                'radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)',
              ],
            }}
            transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
            className="absolute"
            style={{
              left: mousePosition.x,
              top: mousePosition.y,
              width: `${radius * 1.5}px`,
              height: `${radius * 1.5}px`,
              transform: 'translate(-50%, -50%)',
              filter: 'blur(30px)',
            }}
          />
        </motion.div>
      )}
      <div className="absolute inset-0 overflow-hidden">
        {Array.from({ length: 20 }).map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-white/20"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              width: `${Math.random() * 4 + 2}px`,
              height: `${Math.random() * 4 + 2}px`,
            }}
            animate={{
              y: [0, Math.random() * 100 - 50],
              opacity: [0.2, 0.5, 0.2],
            }}
            transition={{
              duration: Math.random() * 3 + 2,
              repeat: Infinity,
              delay: Math.random() * 2,
            }}
          />
        ))}
      </div>
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-400 to-transparent opacity-50" />
        <div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-50" />
        <div className="absolute top-0 left-0 w-px h-full bg-gradient-to-b from-transparent via-cyan-400 to-transparent opacity-50" />
        <div className="absolute top-0 right-0 w-px h-full bg-gradient-to-b from-transparent via-purple-400 to-transparent opacity-50" />
      </div>
    </div>
  )
}