import { useMemo, useState } from 'react';
import { Button } from '@/components/ui/button';

interface WelcomeScreenProps {
  onContinue: () => void;
}

const WelcomeScreen = ({ onContinue }: WelcomeScreenProps) => {
  const [isAnimating, setIsAnimating] = useState(false);



  const handleContinue = () => {
    setIsAnimating(true);
    setTimeout(() => {
      onContinue();
    }, 1000); // match with exit animation duration
  };

  return (
    <div
      className={`fixed inset-0 z-50 transition-opacity duration-1000 ease-in-out ${
        isAnimating ? 'opacity-0 scale-105 blur-sm' : 'opacity-100 scale-100'
      }`}
    >
      {/* Background Video */}
      <div className="absolute inset-0 overflow-hidden">
      <video
        src="/euphoria5.mp4"
        className="w-full h-full object-cover"
        autoPlay
        loop
        muted
        playsInline
        controls={false}
        preload="auto"
      />
        <div className="absolute inset-0 bg-gradient-to-br from-black/40 via-black/20 to-black/50"></div>
      </div>

      {/* Content */}
      <div className="relative h-full flex items-center justify-center text-center px-6">
        <div className="max-w-4xl mx-auto animate-fade-in-slow">
          <h1
            className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight"
            style={{ textShadow: '0 4px 12px rgba(0, 0, 0, 0.8)' }}
          >
            Welcome to{' '}
            <span className="gradient-text block mt-2 text-shadow-xl">
              Euphoria 5
            </span>
            <span className="text-3xl md:text-4xl font-normal block mt-4 text-gold-light">
              by Larysa Caba
            </span>
          </h1>

          <p
            className="text-xl md:text-2xl text-gray-200 mb-12 max-w-2xl mx-auto leading-relaxed"
            style={{ textShadow: '0 3px 10px rgba(0, 0, 0, 0.6)' }}
          >
            Providing cutting edge solutions to investment management
          </p>

          <Button
            onClick={handleContinue}
            size="lg"
            className="bg-gold hover:bg-gold-dark text-navy-dark font-semibold px-12 py-4 text-lg rounded-full transition-all duration-300 hover:scale-105 shimmer-effect shadow-xl animate-glow"
          >
            Click to Continue
          </Button>
        </div>
      </div>

   
    </div>
  );
};

export default WelcomeScreen;