import React from 'react';

interface HeroProps {
  events?: any[];
}

const Hero: React.FC<HeroProps> = () => {
  return (
    <section className="relative w-full h-screen flex items-center justify-center overflow-hidden bg-[#F3F4F6] font-sans select-none">
      {/* Optimized Video Background Container */}
      <div className="absolute inset-0 z-0 overflow-hidden">
        <video
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          className="w-full h-full object-cover scale-125 pointer-events-none"
          style={{ imageRendering: 'auto' }}
        >
          <source src="https://mhvdpopbbtllhvzcpqkf.supabase.co/storage/v1/object/public/HERO_SECTION_VIDEO/VN20260331_201749.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
      
      {/* Centered Content */}
      <div className="relative z-20 text-center px-6 max-w-5xl">
        <h1 className="text-white text-6xl md:text-[8rem] font-serif mb-8 tracking-tight leading-[0.9] animate-in fade-in slide-in-from-bottom-20 duration-1000 drop-shadow-lg">
          The Future is <br /> Built Here
        </h1>
        <p className="text-white/90 text-sm md:text-xl font-sans uppercase tracking-[0.6em] animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-500 drop-shadow-md">
          Welcome to the RIT Events Hub
        </p>
      </div>

      {/* Scroll Down Arrow */}
      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 z-20 animate-bounce cursor-pointer opacity-40 hover:opacity-100 transition-opacity">
        <div className="flex flex-col items-center gap-2">
          <span className="text-[10px] text-white font-sans uppercase tracking-[0.3em] mb-2">Scroll Down</span>
          <i className="fas fa-chevron-down text-white text-xl"></i>
        </div>
      </div>
    </section>
  );
};

export default Hero;