"use client";
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Home, Search, MoveLeft } from 'lucide-react';

export default function NotFound() {
    const [isLoaded, setIsLoaded] = useState(false);
    
    useEffect(() => {
        setIsLoaded(true);
    }, []);

    return (
        <div className="bg-[#080E12] min-h-screen flex flex-col items-center justify-center px-4 py-12">
            <div className={`text-center transition-all duration-1000 transform ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
                {/* Animated 404 number */}
                <div className="relative mb-8">
                    <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">
                        404
                    </h1>
                    <div className="absolute -top-6 -right-6">
                        <div className="h-12 w-12 rounded-full border-4 border-indigo-900 border-t-indigo-400 animate-spin" />
                    </div>
                    <div className="absolute -bottom-4 -left-4">
                        <Search className="h-8 w-8 text-purple-300 animate-bounce" />
                    </div>
                </div>
                
                {/* Page not found message */}
                <h2 className={`text-2xl font-semibold text-indigo-200 mb-4 transition-all delay-300 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
                    Oops! Page Not Found
                </h2>
                
                <p className={`text-indigo-300/80 max-w-md mx-auto mb-8 transition-all delay-500 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
                    The page you are looking for seems to have wandered off into the digital void. Let's guide you back to reality.
                </p>
                
                {/* Animated dots - glowing effect */}
                <div className="flex justify-center mb-8">
                    {[0, 1, 2, 3, 4].map((dot) => (
                        <div
                            key={dot}
                            className="h-2 w-2 mx-1 rounded-full bg-purple-400"
                            style={{
                                animation: "pulse 1.5s infinite",
                                animationDelay: `${dot * 0.2}s`,
                                boxShadow: "0 0 8px 2px rgba(167, 139, 250, 0.3)"
                            }}
                        />
                    ))}
                </div>
                
                {/* Home link button - glowing effect */}
                <Link 
                    href="/"
                    className={`inline-flex items-center bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium py-3 px-6 rounded-full hover:from-indigo-500 hover:to-purple-500 transition-all duration-300 transform hover:scale-105 hover:shadow-lg delay-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
                    style={{
                        boxShadow: "0 0 15px rgba(129, 140, 248, 0.5)"
                    }}
                >
                    <MoveLeft className="mr-2 h-5 w-5" />
                    Return to Home
                </Link>
            </div>

            {/* Floating particles for atmosphere */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                {[...Array(20)].map((_, i) => (
                    <div
                        key={i}
                        className="absolute rounded-full bg-indigo-500/10"
                        style={{
                            width: `${Math.random() * 6 + 2}px`,
                            height: `${Math.random() * 6 + 2}px`,
                            top: `${Math.random() * 100}%`,
                            left: `${Math.random() * 100}%`,
                            animation: `float ${Math.random() * 10 + 10}s linear infinite`,
                            animationDelay: `${Math.random() * 5}s`,
                            opacity: Math.random() * 0.5 + 0.2
                        }}
                    />
                ))}
            </div>

            {/* Add keyframes for floating animation */}
            <style jsx global>{`
                @keyframes float {
                    0% {
                        transform: translateY(0) translateX(0);
                        opacity: 0;
                    }
                    10% {
                        opacity: 0.5;
                    }
                    90% {
                        opacity: 0.5;
                    }
                    100% {
                        transform: translateY(-100vh) translateX(20px);
                        opacity: 0;
                    }
                }
                @keyframes pulse {
                    0%, 100% {
                        opacity: 0.6;
                        transform: scale(1);
                    }
                    50% {
                        opacity: 1;
                        transform: scale(1.3);
                    }
                }
            `}</style>
        </div>
    );
}