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";
import accommodationImage2 from "../assets/accommodation-2.jpg";
import heroRoomImage from "../assets/hero-room.jpg";

const RoomsGrid = () => {
  const rooms = [
    {
      title: "Deluxe Suite - Ocean View",
      category: "Ocean View",
      image: room1Image,
      price: "$420/night"
    },
    {
      title: "Premium King Suite",
      category: "Luxury Suite",
      image: room2Image,
      price: "$380/night"
    },
    {
      title: "Executive Double Room",
      category: "Business Class",
      image: room3Image,
      price: "$290/night"
    },
    {
      title: "Royal Penthouse Suite",
      category: "Presidential",
      image: accommodationImage1,
      price: "$650/night"
    },
    {
      title: "Garden View Villa",
      category: "Villa Collection",
      image: accommodationImage2,
      price: "$520/night"
    },
    {
      title: "Classic Comfort Room",
      category: "Standard Plus",
      image: heroRoomImage,
      price: "$220/night"
    }
  ];

  const categories = ["Ocean View", "Luxury Suite", "Business Class", "Family Suite", "Executive Suites", "Garden View Villa"];

  return (
    <section className="section-dark py-20 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-wrap justify-center gap-6 mb-12">
          {categories.map((category, index) => (
            <button 
              key={index}
              className={`px-6 py-2 rounded-full text-sm transition-colors ${
                index === 0 
                  ? 'bg-wood-accent text-primary' 
                  : 'bg-transparent border border-[hsl(var(--dark-muted))] text-[hsl(var(--dark-foreground))] hover:bg-wood-accent hover:text-primary'
              }`}
            >
              {category}
            </button>
          ))}
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {rooms.map((room, index) => (
            <div key={index} className="card-elevated bg-[hsl(var(--dark-muted))] p-0 overflow-hidden group hover:shadow-[var(--shadow-elevated)] transition-all duration-300">
              <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-300"
                />
                <div className="absolute top-4 right-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg px-3 py-1">
                  <span className="text-white text-sm font-medium">{room.price}</span>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-medium text-[hsl(var(--dark-foreground))] mb-2">
                  {room.title}
                </h3>
                <p className="text-[hsl(var(--dark-muted))] text-sm mb-4">
                  {room.category}
                </p>
                <button className="btn-secondary bg-wood-accent text-primary hover:bg-wood-accent/90 w-full">
                  View Details
                </button>
              </div>
            </div>
          ))}
        </div>
        
        <div className="text-center mt-12">
          <button className="btn-secondary bg-wood-accent text-primary hover:bg-wood-accent/90">
            View All Rooms
          </button>
        </div>
      </div>
    </section>
  );
};

export default RoomsGrid;