import { useEffect } from 'react';

export default function SplashScreen({ onComplete }: { onComplete: () => void }) {
  useEffect(() => {
    const timer = setTimeout(onComplete, 2500);
    return () => clearTimeout(timer);
  }, [onComplete]);

  return (
    <div className="min-h-screen brand-gradient flex flex-col items-center justify-center px-6">
      <div className="animate-scale-in">
        <img src="/logo.jpg" alt="SkatePro Academy" className="w-48 h-auto rounded-2xl shadow-2xl" />
      </div>
      <p className="mt-6 text-white/80 text-sm font-medium tracking-[3px] uppercase animate-fade-in" style={{ animationDelay: '0.6s', animationFillMode: 'both' }}>
        Skating Academy Manager
      </p>
      <div className="flex gap-2 mt-8" style={{ animationDelay: '0.9s', animationFillMode: 'both' }}>
        {[0, 1, 2, 3].map(i => (
          <div key={i} className="w-2 h-2 rounded-full bg-white/60 animate-pulse-dot" style={{ animationDelay: `${i * 0.15}s` }} />
        ))}
      </div>
    </div>
  );
}
