import { Calendar, Users, Wifi, Car } from "lucide-react";
import accommodation1 from "../assets/accommodation-1.jpg";
import accommodation2 from "../assets/accommodation-2.jpg";

const AccommodationSection = () => {
  const accommodations = [
    {
      id: 1,
      image: accommodation1,
      title: "Luxury Downtown Suite",
      description: "Spacious suite in the heart of the city with panoramic views and premium amenities.",
      price: "€500",
      amenities: ["Free WiFi", "Parking", "Room Service", "City View"],
      rating: 4.8,
      reviews: 124,
    },
    {
      id: 2,
      image: accommodation2,
      title: "Modern Business Hotel",
      description: "Contemporary accommodation perfect for business travelers with modern facilities.",
      price: "€500", 
      amenities: ["Business Center", "Gym", "Restaurant", "Airport Shuttle"],
      rating: 4.9,
      reviews: 89,
    },
  ];

  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 text-center">accommodation</h2>
        </div>
        
        {/* Accommodation Cards */}
        <div className="space-y-12">
          {accommodations.map((item, index) => (
            <div key={item.id} className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
              {/* Image */}
              <div className={`order-1 ${index % 2 === 1 ? 'lg:order-2' : ''}`}>
                <div className="relative rounded-2xl overflow-hidden shadow-[var(--shadow-card)] group">
                  <img 
                    src={item.image} 
                    alt={item.title}
                    className="w-full h-[400px] object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute top-4 right-4 bg-card/95 backdrop-blur-sm rounded-lg px-3 py-1">
                    <span className="text-sm font-medium">★ {item.rating}</span>
                  </div>
                </div>
              </div>
              
              {/* Content */}
              <div className={`order-2 space-y-6 ${index % 2 === 1 ? 'lg:order-1' : ''}`}>
                <div className="space-y-4">
                  <h3 className="text-3xl font-light">{item.title}</h3>
                  <p className="text-muted-foreground text-lg leading-relaxed">{item.description}</p>
                </div>
                
                {/* Amenities */}
                <div className="grid grid-cols-2 gap-3">
                  {item.amenities.map((amenity) => (
                    <div key={amenity} className="flex items-center space-x-2 text-sm">
                      <div className="w-2 h-2 bg-secondary rounded-full" />
                      <span>{amenity}</span>
                    </div>
                  ))}
                </div>
                
                {/* Price and Booking */}
                <div className="flex items-center justify-between">
                  <div className="space-y-1">
                    <div className="text-3xl font-medium">{item.price}<span className="text-lg text-muted-foreground">/night</span></div>
                    <div className="text-sm text-muted-foreground">{item.reviews} reviews</div>
                  </div>
                  <button className="btn-primary">
                    Book Now
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default AccommodationSection;