const PromoBanners = () => {
  return (
    <section className="py-12 bg-gray-50 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Banner 1: 10% OFF */}
          <div className="relative rounded-2xl overflow-hidden h-48 md:h-56 group shadow-md cursor-pointer">
            <img 
              src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&q=80&w=800" 
              alt="10% OFF" 
              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-green-900/80 to-transparent p-6 sm:p-8 flex flex-col justify-center">
              <h3 className="text-white text-2xl font-bold mb-2">Get 10% OFF</h3>
              <p className="text-green-50 text-sm mb-4">on your first booking, use code</p>
              <div className="inline-flex w-fit px-4 py-2 border border-white/50 rounded-lg text-white font-semibold text-sm backdrop-blur-sm">
                FIRSTRIP
              </div>
            </div>
          </div>

          {/* Banner 2: Beach Getaway */}
          <div className="relative rounded-2xl overflow-hidden h-48 md:h-56 group shadow-md cursor-pointer">
            <img 
              src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80&w=800" 
              alt="Beach Getaway" 
              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-primary-900/80 to-transparent p-6 sm:p-8 flex flex-col justify-center">
              <h3 className="text-white text-xl md:text-2xl font-bold mb-2">Your Dream Beach Getaway Awaits!</h3>
              <p className="text-blue-50 text-sm mb-4">7 days of sun, sand & pure relaxation!</p>
              <button 
                onClick={() => document.getElementById("hero")?.scrollIntoView({ behavior: "smooth" })}
                className="w-fit px-5 py-2 bg-white text-primary-900 font-bold text-sm rounded-lg hover:bg-gray-100 transition-colors"
              >
                Learn More
              </button>
            </div>
          </div>

          {/* Banner 3: Mysore */}
          <div className="relative rounded-2xl overflow-hidden h-48 md:h-56 group shadow-md cursor-pointer">
            <img 
              src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&q=80&w=800" 
              alt="Mysore Getaway" 
              className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-dark-900/80 to-transparent p-6 sm:p-8 flex flex-col justify-center">
              <h3 className="text-white text-xl md:text-2xl font-bold mb-2">Royal Mysore Getaway!</h3>
              <p className="text-gray-200 text-sm mb-4 line-clamp-2">Explore palaces, gardens & rich heritage in the City of Royals!</p>
              <button 
                onClick={() => document.getElementById("hero")?.scrollIntoView({ behavior: "smooth" })}
                className="w-fit px-5 py-2 bg-white text-dark-900 font-bold text-sm rounded-lg hover:bg-gray-100 transition-colors"
              >
                Learn More
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PromoBanners;
