import { Link } from 'react-router-dom'
import { NeonButton } from '@/components/ui'
import { Gamepad2, Home, Ghost, Sparkles } from 'lucide-react'

export function NotFoundPage() {
  return (
    <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
      {/* Background effects */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/3 -left-32 w-96 h-96 bg-accent-500/5 rounded-full blur-[100px]" />
        <div className="absolute bottom-1/3 -right-32 w-96 h-96 bg-neon-500/5 rounded-full blur-[100px]" />
      </div>

      {/* Icon */}
      <div className="relative mb-8 animate-float">
        <div className="w-32 h-32 rounded-3xl bg-dark-700/50 border border-dark-600 flex items-center justify-center">
          <Ghost className="w-20 h-20 text-gray-600" />
        </div>
        <div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-xl bg-neon-500/20 border border-neon-500/30 flex items-center justify-center">
          <Gamepad2 className="w-6 h-6 text-neon-400" />
        </div>
        {/* Glitch effect dots */}
        <div className="absolute -top-2 -left-2 w-3 h-3 rounded-full bg-accent-500/50 animate-pulse" />
        <div className="absolute top-4 -right-4 w-2 h-2 rounded-full bg-neon-500/50 animate-pulse" style={{ animationDelay: '0.5s' }} />
      </div>

      {/* 404 text with glitch effect */}
      <div className="relative mb-4">
        <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon-400 via-accent-400 to-pink-400">
          404
        </h1>
        <div className="absolute inset-0 text-8xl font-bold text-neon-500/20 blur-xl">
          404
        </div>
      </div>

      <h2 className="text-2xl font-bold text-white mb-3">
        Страница не найдена
      </h2>
      <p className="text-gray-400 mb-8 max-w-md">
        Похоже, эта страница ушла на марафон и не вернулась.
        <br />
        <span className="text-gray-500">Попробуй начать с главной.</span>
      </p>

      {/* Button */}
      <Link to="/">
        <NeonButton size="lg" icon={<Home className="w-5 h-5" />}>
          На главную
        </NeonButton>
      </Link>

      {/* Decorative sparkles */}
      <div className="absolute top-1/4 left-1/4 opacity-20">
        <Sparkles className="w-6 h-6 text-neon-400 animate-pulse" />
      </div>
      <div className="absolute bottom-1/3 right-1/4 opacity-20">
        <Sparkles className="w-4 h-4 text-accent-400 animate-pulse" style={{ animationDelay: '1s' }} />
      </div>
    </div>
  )
}
