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

export default function AnalyticsDashboard() {
  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>
  );
}