import { useEffect, useRef, useState } from 'react'

/** Mouse-follow spotlight effect for hero sections */
export function useSpotlight(containerRef: React.RefObject<HTMLElement | null>) {
  const [pos, setPos] = useState({ x: 0.5, y: 0.5 })
  const [hovering, setHovering] = useState(false)

  useEffect(() => {
    const el = containerRef.current
    if (!el) return

    const move = (e: MouseEvent) => {
      const rect = el.getBoundingClientRect()
      setPos({
        x: (e.clientX - rect.left) / rect.width,
        y: (e.clientY - rect.top) / rect.height,
      })
    }
    const enter = () => setHovering(true)
    const leave = () => setHovering(false)

    el.addEventListener('mousemove', move)
    el.addEventListener('mouseenter', enter)
    el.addEventListener('mouseleave', leave)

    return () => {
      el.removeEventListener('mousemove', move)
      el.removeEventListener('mouseenter', enter)
      el.removeEventListener('mouseleave', leave)
    }
  }, [containerRef])

  return { x: pos.x, y: pos.y, hovering }
}

/** Spotlight overlay component */
export function SpotlightOverlay({ x, y, hovering, color = 'rgba(34,211,238,0.08)', size = 700 }: {
  x: number; y: number; hovering: boolean; color?: string; size?: number
}) {
  return (
    <div
      className="pointer-events-none absolute inset-0 transition-opacity duration-500 z-0"
      style={{
        opacity: hovering ? 1 : 0,
        background: `radial-gradient(${size}px circle at ${x * 100}% ${y * 100}%, ${color}, transparent 50%)`,
      }}
    />
  )
}