import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import { Sparkles, Rocket, Clock } from 'lucide-react';

export default function NotFound() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 flex items-center justify-center">
      {/* Coming Soon Message */}
      <Navbar />
      <div className="text-center px-4 py-16 max-w-xl">
        <div className="mb-6 relative">
          <Rocket className="h-16 w-16 text-indigo-600 mx-auto animate-bounce" />
          <div className="absolute top-0 left-1/2 transform -translate-x-1/2">
            <Sparkles className="h-6 w-6 text-purple-400 animate-pulse" />
          </div>
        </div>
        
        <h1 className="text-4xl font-bold text-indigo-800 mb-4 tracking-tight">
          Something Awesome is Coming Soon!
        </h1>
        
        <p className="text-xl text-indigo-600 mb-8">
          We're building something magical for you. Stay tuned!
        </p>
        
        <div className="flex items-center justify-center space-x-2 mb-10">
          <Clock className="h-5 w-5 text-purple-500" />
          <div className="flex space-x-1">
            {[0, 1, 2, 3].map((dot) => (
              <div
                key={dot}
                className="h-2 w-2 rounded-full bg-purple-500"
                style={{
                  animation: "pulse 1.5s infinite",
                  animationDelay: `${dot * 0.3}s`
                }}
              />
            ))}
          </div>
        </div>
        
        <div className="relative">
          <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
            Notify Me
          </button>
          <div className="absolute -top-2 -right-2">
            <div className="h-4 w-4 bg-purple-400 rounded-full animate-ping" />
          </div>
        </div>
      </div>
    </div>
  );
}

// THis is the not found page and above is the coming soon

// "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>
//     );
// }