import { services } from '@/data/services'
import ServiceCard from '@/components/ServiceCard'
import { ServiceInfo } from '@/types/services'
import Image from 'next/image'

export default function Services() {
  return (
    <section className="bg-white py-24">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center mb-16">
          <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
            Professional Services
          </h2>
          <p className="mt-6 text-lg leading-8 text-gray-600">
            Comprehensive business, financial, accounting, and income tax services tailored to your needs
          </p>
        </div>

        {/* Featured Image */}
        <div className="mb-16 relative h-[400px] rounded-2xl overflow-hidden">
          <Image
            src="/images/1.jpg"
            alt="Hands typing on a laptop keyboard with digital overlays showing the word 'BUDGET' and icons representing business concepts like security, growth, optimization, and analysis."
            fill
            className="object-cover"
            priority
          />
        </div>

        {/* Services Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {services.map((service: ServiceInfo) => (
            <ServiceCard key={service.id} {...service} />
          ))}
        </div>
      </div>
    </section>
  );
}
