import { serviceCardsData } from '../../data/siteData'

export default function ServiceCards() {
  return (
    <section className="py-20 bg-white" id="services">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-3 gap-6">
          {serviceCardsData.map((service) => (
            <div
              key={service.id}
              className={`${service.bgClass} min-h-[280px] rounded-lg overflow-hidden`}
            >
              <div className="p-8 md:p-12 h-full flex flex-col justify-center text-center">
                <h4 className="text-xl font-bold mb-4 font-sans">
                  <a href="#url" style={{ color: '#ffffff' }} className="hover:text-secondary transition-colors">
                    {service.title}
                  </a>
                </h4>
                <p className="text-white/90">
                  {service.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}