import React from 'react';

interface HeroProps {
  title: string;
  subtitle1: string;
  subtitle2?: string;
  primaryButtonText: string;
  primaryButtonLink: string;
  secondaryButtonText?: string;
  secondaryButtonLink?: string;
  videoSrc?: string;
}

export const Hero: React.FC<HeroProps> = ({
  title,
  subtitle1,
  subtitle2,
  primaryButtonText,
  primaryButtonLink,
  secondaryButtonText,
  secondaryButtonLink,
  videoSrc,
}) => {
  return (
    <section className="relative min-h-screen w-full flex flex-col justify-center items-center overflow-hidden bg-background">
      {videoSrc && (
        <div className="absolute inset-0 z-0">
          <video
            autoPlay
            muted
            loop
            playsInline
            className="absolute inset-0 w-full h-full object-cover opacity-60"
          >
            <source src={videoSrc} type="video/webm" />
          </video>
          <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/40 to-background/80 z-2"></div>
        </div>
      )}
      
      <div className="relative z-10 container mx-auto px-4 text-center max-w-5xl">
        <h1 className="text-5xl md:text-8xl font-bold tracking-tighter leading-[0.9] mb-8 text-white">
          {title}
        </h1>
        <p className="text-xl md:text-3xl text-neutral-light leading-relaxed mb-6 max-w-3xl mx-auto">
          {subtitle1}
        </p>
        {subtitle2 && (
          <p className="text-lg md:text-xl text-neutral-gray mb-10 max-w-2xl mx-auto">
            {subtitle2}
          </p>
        )}
        
        <div className="flex flex-wrap justify-center gap-6">
          <a
            href={primaryButtonLink}
            className="px-10 py-5 rounded-full bg-primary text-white font-bold hover:shadow-[0_0_30px_rgba(0,113,227,0.5)] transition-all transform hover:-translate-y-1"
          >
            {primaryButtonText}
          </a>
          {secondaryButtonText && secondaryButtonLink && (
            <a
              href={secondaryButtonLink}
              className="px-10 py-5 rounded-full glass-effect text-white font-bold hover:bg-white/10 transition-all transform hover:-translate-y-1"
            >
              {secondaryButtonText}
            </a>
          )}
        </div>
      </div>
      
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center animate-bounce opacity-50">
        <div className="w-6 h-10 border-2 border-white rounded-full flex justify-center p-1">
          <div className="w-1 h-2 bg-white rounded-full"></div>
        </div>
      </div>
    </section>
  );
};
