import { Star, MapPin, Calendar } from "lucide-react";
import room3 from "../assets/room-3.jpg";

const DealSection = () => {
  return (
    <section className="py-16 lg:py-24">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Title */}
        <div className="text-center mb-16">
          <h2 className="text-section-title">steal deal</h2>
        </div>
        
        {/* Deal Card */}
        <div className="max-w-4xl mx-auto">
          <div className="card-elevated overflow-hidden">
            <div className="grid lg:grid-cols-2">
              {/* Image */}
              <div className="relative">
                <img 
                  src={room3} 
                  alt="Special deal accommodation"
                  className="w-full h-80 lg:h-full object-cover"
                />
                <div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-lg text-sm font-medium">
                  Limited Time
                </div>
                <div className="absolute top-4 right-4 bg-card/95 backdrop-blur-sm rounded-lg px-3 py-1">
                  <div className="flex items-center space-x-1">
                    <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                    <span className="text-sm font-medium">4.8</span>
                  </div>
                </div>
              </div>
              
              {/* Content */}
              <div className="p-8 lg:p-12 space-y-6">
                <div className="space-y-4">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <MapPin className="w-4 h-4" />
                    <span>Downtown Premium Location</span>
                  </div>
                  
                  <h3 className="text-2xl lg:text-3xl font-light">
                    Luxury Suite Package
                  </h3>
                  
                  <p className="text-muted-foreground leading-relaxed">
                    Exclusive weekend package including breakfast, spa access, and city tour. 
                    Perfect for romantic getaways or special celebrations.
                  </p>
                </div>
                
                {/* Price */}
                <div className="space-y-2">
                  <div className="flex items-baseline space-x-2">
                    <span className="text-3xl font-bold text-red-500">$100</span>
                    <span className="text-lg text-muted-foreground line-through">$250</span>
                    <span className="text-sm text-muted-foreground">/night</span>
                  </div>
                  <div className="text-sm text-green-600 font-medium">Save 60% this weekend!</div>
                </div>
                
                {/* Features */}
                <div className="space-y-3">
                  <div className="flex items-center space-x-2 text-sm">
                    <div className="w-2 h-2 bg-green-500 rounded-full" />
                    <span>Free breakfast included</span>
                  </div>
                  <div className="flex items-center space-x-2 text-sm">
                    <div className="w-2 h-2 bg-green-500 rounded-full" />
                    <span>Complimentary spa access</span>
                  </div>
                  <div className="flex items-center space-x-2 text-sm">
                    <div className="w-2 h-2 bg-green-500 rounded-full" />
                    <span>Free cancellation up to 24h</span>
                  </div>
                </div>
                
                {/* Booking */}
                <div className="space-y-4">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <Calendar className="w-4 h-4" />
                    <span>Available this weekend only</span>
                  </div>
                  
                  <button className="w-full btn-primary">
                    Book This Deal
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default DealSection;