import room1Image from "../assets/room-1.jpg";

const EssentialsSection = () => {
  const essentials = [
    {
      title: "Premium Comfort",
      description: "Luxurious bedding and furniture designed for ultimate relaxation and rest."
    },
    {
      title: "Modern Amenities",
      description: "State-of-the-art facilities including high-speed WiFi, smart TV, and climate control."
    },
    {
      title: "Exceptional Service",
      description: "24/7 concierge service to assist with all your needs and requests."
    },
    {
      title: "Prime Location",
      description: "Strategically located with easy access to major attractions and business districts."
    },
    {
      title: "Gourmet Dining",
      description: "World-class restaurant and room service featuring international and local cuisine."
    },
    {
      title: "Wellness Facilities",
      description: "Spa services, fitness center, and recreational facilities for your well-being."
    }
  ];

  return (
    <section className="py-20 px-4 bg-accent">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-6xl font-light text-foreground mb-4">essentials</h2>
          <p className="text-muted-foreground text-lg">
            Everything you need for a perfect stay
          </p>
        </div>
        
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {essentials.map((essential, index) => (
              <div key={index} className="space-y-3">
                <h3 className="text-xl font-medium text-foreground">
                  {essential.title}
                </h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  {essential.description}
                </p>
              </div>
            ))}
          </div>
          
          <div className="relative">
            <div className="card-elevated overflow-hidden rounded-3xl">
              <img 
                src={room1Image}
                alt="Essential amenities showcase"
                className="w-full h-96 object-cover"
              />
            </div>
            <div className="absolute top-8 right-8 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg p-4 text-white">
              <div className="text-2xl font-light">Premium</div>
              <p className="text-xs opacity-90">Quality assured</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default EssentialsSection;