import { highlightsData } from "../../data/homeData";

const WhyChooseUs = () => {
  return (
    <section id="about" className="py-16 bg-white px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <h2 className="text-3xl font-bold text-center text-dark-900 mb-10">
          Why Choose road.rentals Cabs & Travels?
        </h2>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {highlightsData.map((highlight) => (
            <div key={highlight.id} className="flex flex-col text-center group cursor-pointer">
              <div className="rounded-xl overflow-hidden h-40 mb-4 shadow-sm group-hover:shadow-md transition-all">
                <img 
                  src={highlight.image} 
                  alt={highlight.title} 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
              </div>
              <h3 className="font-bold text-lg text-dark-900 mb-2 group-hover:text-primary-600 transition-colors">
                {highlight.title}
              </h3>
              <p className="text-dark-700 text-sm leading-relaxed">
                {highlight.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default WhyChooseUs;
