import { Heart } from "lucide-react";
import room1 from "../assets/room-1.jpg";
import room2 from "../assets/room-2.jpg";
import room3 from "../assets/room-3.jpg";

const RoomGallery = () => {
  const rooms = [
    {
      id: 1,
      image: room1,
      title: "Deluxe Suite",
      subtitle: "Premium comfort with city view",
      price: "€450",
    },
    {
      id: 2,
      image: room2,
      title: "Executive Room",
      subtitle: "Modern luxury for business travelers",
      price: "€350",
    },
    {
      id: 3,
      image: room3,
      title: "Spa Suite",
      subtitle: "Relaxation with wellness amenities",
      price: "€520",
    },
  ];

  return (
    <section className="py-16 lg:py-24">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-3 gap-8">
          {rooms.map((room, index) => (
            <div key={room.id} className="group cursor-pointer">
              <div className="card-elevated overflow-hidden hover:shadow-[var(--shadow-elevated)] transition-all duration-500 group-hover:-translate-y-2">
                <div className="relative overflow-hidden">
                  <img 
                    src={room.image} 
                    alt={room.title}
                    className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute top-4 right-4">
                    <button className="w-10 h-10 bg-card/90 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-card transition-colors">
                      <Heart className="w-5 h-5 text-muted-foreground hover:text-red-500 transition-colors" />
                    </button>
                  </div>
                  <div className="absolute bottom-4 left-4 bg-card/95 backdrop-blur-sm rounded-lg px-3 py-1">
                    <span className="text-sm font-medium">{room.price}<span className="text-muted-foreground">/night</span></span>
                  </div>
                </div>
                
                <div className="p-6 space-y-2">
                  <h3 className="text-xl font-medium">{room.title}</h3>
                  <p className="text-muted-foreground">{room.subtitle}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default RoomGallery;