import heroImage from "../assets/hero-room.jpg";

const AboutHero = () => {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0">
        <img 
          src={heroImage}
          alt="Luxury interior journey since 1989"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-black/20"></div>
      </div>
      
      <div className="relative z-10 text-center text-white px-4">
        <h1 className="text-7xl md:text-8xl font-light mb-8 tracking-wide">
          our journey
        </h1>
        
        <div className="absolute top-1/2 right-1/4 transform -translate-y-1/2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8 text-white">
          <div className="text-6xl font-light mb-2">1989</div>
          <p className="text-sm opacity-90">Our founding year</p>
          <p className="text-xs opacity-70 mt-2">Creating memorable<br />experiences since</p>
        </div>
      </div>
      
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex gap-2">
        {[1, 2, 3, 4, 5].map((dot, index) => (
          <div 
            key={index}
            className={`w-2 h-2 rounded-full ${index === 0 ? 'bg-white' : 'bg-white/30'}`}
          />
        ))}
      </div>
    </section>
  );
};

export default AboutHero;