import { MapPin, Star, Clock } from "lucide-react";

const SpotlightsSection = () => {
  const spotlights = [
    {
      icon: MapPin,
      title: "Prime Locations",
      description: "Strategically located properties in the heart of major cities and tourist destinations worldwide."
    },
    {
      icon: Star,
      title: "Premium Service",
      description: "Exceptional hospitality with personalized service tailored to exceed your expectations every time."
    },
    {
      icon: Clock,
      title: "Instant Booking",
      description: "Book instantly with real-time availability and immediate confirmation for a seamless experience."
    }
  ];

  return (
    <section className="py-16 lg:py-24 bg-muted/20">
      <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">spotlights</h2>
          <p className="text-muted-foreground text-lg mt-4 max-w-2xl mx-auto">
            Discover what makes our accommodation service stand out from the rest
          </p>
        </div>
        
        {/* Spotlights Grid */}
        <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
          {spotlights.map((spotlight, index) => (
            <div key={index} className="text-center space-y-6 group">
              <div className="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
                <spotlight.icon className="w-10 h-10 text-secondary" />
              </div>
              
              <div className="space-y-4">
                <h3 className="text-xl font-medium">{spotlight.title}</h3>
                <p className="text-muted-foreground leading-relaxed">
                  {spotlight.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default SpotlightsSection;