import room1Image from "../assets/room-1.jpg";
import room2Image from "../assets/room-2.jpg";
import room3Image from "../assets/room-3.jpg";
import accommodationImage1 from "../assets/accommodation-1.jpg";

const RoomRecommendations = () => {
  return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-6xl font-light text-foreground mb-4">recommend</h2>
          <p className="text-muted-foreground text-lg">
            Handpicked selections for your perfect stay
          </p>
        </div>
        
        <div className="grid lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 grid md:grid-cols-2 gap-6">
            <div className="card-elevated p-0 overflow-hidden group">
              <div className="relative">
                <img 
                  src={room1Image}
                  alt="Oceanview Deluxe Suite"
                  className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-4 left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg px-3 py-1">
                  <span className="text-white text-sm">★★★★★</span>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-lg font-medium text-foreground mb-2">
                  Oceanview Deluxe Suite
                </h3>
                <p className="text-muted-foreground text-sm mb-4">
                  2-4 Guests • Ocean View • 45m²
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-foreground font-medium">$420/night</span>
                  <button className="btn-secondary text-sm">Book Now</button>
                </div>
              </div>
            </div>
            
            <div className="card-elevated p-0 overflow-hidden group">
              <div className="relative">
                <img 
                  src={room2Image}
                  alt="Garden View Villa"
                  className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-4 left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg px-3 py-1">
                  <span className="text-white text-sm">★★★★★</span>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-lg font-medium text-foreground mb-2">
                  Garden View Villa
                </h3>
                <p className="text-muted-foreground text-sm mb-4">
                  4-6 Guests • Garden View • 65m²
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-foreground font-medium">$520/night</span>
                  <button className="btn-secondary text-sm">Book Now</button>
                </div>
              </div>
            </div>
            
            <div className="card-elevated p-0 overflow-hidden group">
              <div className="relative">
                <img 
                  src={room3Image}
                  alt="Executive Double Room"
                  className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-4 left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg px-3 py-1">
                  <span className="text-white text-sm">★★★★</span>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-lg font-medium text-foreground mb-2">
                  Executive Double Room
                </h3>
                <p className="text-muted-foreground text-sm mb-4">
                  2 Guests • Business Class • 35m²
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-foreground font-medium">$290/night</span>
                  <button className="btn-secondary text-sm">Book Now</button>
                </div>
              </div>
            </div>
            
            <div className="card-elevated p-0 overflow-hidden group">
              <div className="relative">
                <img 
                  src={accommodationImage1}
                  alt="Presidential Suite"
                  className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-4 left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg px-3 py-1">
                  <span className="text-white text-sm">★★★★★</span>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-lg font-medium text-foreground mb-2">
                  Presidential Suite
                </h3>
                <p className="text-muted-foreground text-sm mb-4">
                  4-8 Guests • Presidential • 120m²
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-foreground font-medium">$850/night</span>
                  <button className="btn-secondary text-sm">Book Now</button>
                </div>
              </div>
            </div>
          </div>
          
          <div className="section-dark p-8 rounded-3xl flex flex-col justify-center items-center text-center">
            <div className="text-8xl font-light text-wood-accent mb-4">20%</div>
            <h3 className="text-2xl font-light text-[hsl(var(--dark-foreground))] mb-4">
              Book accommodation and get 20% off on your first booking
            </h3>
            <p className="text-[hsl(var(--dark-muted))] text-sm mb-6">
              Limited time offer - expires December 31
            </p>
            <button className="btn-secondary bg-wood-accent text-primary hover:bg-wood-accent/90">
              Claim Offer
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default RoomRecommendations;