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

const ServicesSection = () => {
  return (
    <section id="services" 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">Vehicle Services</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {servicesData.map((service) => (
            <div key={service.id} className="group cursor-pointer">
              <div className="overflow-hidden rounded-xl h-64 sm:h-72 mb-4 shadow-sm group-hover:shadow-md transition-shadow">
                <img
                  src={service.image}
                  alt={service.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
              </div>
              <h3 className="text-lg font-bold text-dark-900 text-center group-hover:text-primary-600 transition-colors">
                {service.title}
              </h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ServicesSection;
