export default function Hero() {
  return (
    <section className="relative h-screen w-full overflow-hidden bg-midnight">
      {/* Background Overlay */}
      <div className="absolute inset-0 bg-black/40 z-10" />
      
      {/* Hero Image */}
      <div className="absolute inset-0 bg-[url('/hero-yacht.png')] bg-cover bg-center scale-105 animate-[zoom_20s_infinite_alternate]">
        {/* Animated background for a premium feel */}
      </div>

      <div className="relative z-20 h-full flex flex-col items-center justify-center text-center px-4">
        <span className="text-gold luxury-text text-sm mb-6 fade-in-up tracking-[0.4em]">Exclusivity Redefined</span>
        <h1 className="text-white text-6xl md:text-8xl lg:text-9xl mb-8 fade-in-up font-serif" style={{ animationDelay: '0.2s' }}>
          The Pinnacle of <br />
          <span className="italic">Aegean Luxury</span>
        </h1>
        <div className="w-24 h-px bg-gold fade-in-up mb-8" style={{ animationDelay: '0.4s' }}></div>
        <p className="text-sand text-lg md:text-xl luxury-text fade-in-up" style={{ animationDelay: '0.6s' }}>
          Since 1980
        </p>
        
        <div className="mt-16 fade-in-up flex flex-col md:row gap-6" style={{ animationDelay: '0.8s' }}>
          <button className="btn-gold">Explore the Fleet</button>
          <button className="btn-hollow !text-white !border-white hover:!bg-white hover:!text-midnight">Our Destinations</button>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 animate-bounce cursor-pointer opacity-50 hover:opacity-100 transition-opacity">
        <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M19 14l-7 7-7-7" />
        </svg>
      </div>
    </section>
  );
}