import accommodationImage2 from "../assets/accommodation-2.jpg";

const PremierBargain = () => {
  return (
    <section className="section-dark py-20 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <div>
              <h2 className="text-6xl font-light text-[hsl(var(--dark-foreground))] mb-2">
                Premier
              </h2>
              <h2 className="text-6xl font-light text-wood-accent">
                Bargain
              </h2>
            </div>
            
            <div className="space-y-6">
              <div className="border-l-4 border-wood-accent pl-6">
                <h3 className="text-2xl font-medium text-[hsl(var(--dark-foreground))] mb-2">
                  Midtown Manhattan Retreat
                </h3>
                <p className="text-[hsl(var(--dark-muted))] mb-4">
                  Experience luxury in the heart of Manhattan with our exclusive premier suite featuring panoramic city views and world-class amenities.
                </p>
                <div className="flex items-center gap-4">
                  <span className="text-3xl font-light text-wood-accent">$200</span>
                  <span className="text-[hsl(var(--dark-muted))]">/night</span>
                  <span className="text-sm text-[hsl(var(--dark-muted))] line-through">$350/night</span>
                </div>
              </div>
              
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-2">
                  <div className="text-lg font-medium text-[hsl(var(--dark-foreground))]">4.9/5</div>
                  <p className="text-[hsl(var(--dark-muted))] text-sm">Guest Rating</p>
                </div>
                <div className="space-y-2">
                  <div className="text-lg font-medium text-[hsl(var(--dark-foreground))]">1,200+</div>
                  <p className="text-[hsl(var(--dark-muted))] text-sm">Reviews</p>
                </div>
              </div>
              
              <button className="btn-secondary bg-wood-accent text-primary hover:bg-wood-accent/90">
                Book Premier Deal
              </button>
            </div>
          </div>
          
          <div className="relative">
            <div className="card-elevated bg-[hsl(var(--dark-muted))] p-0 overflow-hidden rounded-3xl">
              <img 
                src={accommodationImage2}
                alt="Premier Manhattan suite interior"
                className="w-full h-96 object-cover"
              />
              <div className="absolute top-6 right-6 bg-wood-accent text-primary px-4 py-2 rounded-lg">
                <span className="text-sm font-medium">43% OFF</span>
              </div>
            </div>
            
            <div className="absolute -bottom-4 -left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4">
              <div className="flex items-center gap-3">
                <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                <span className="text-white text-sm">2 rooms left at this price</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PremierBargain;