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

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

        {/* Featured Image */}
        <div className="mb-16 relative h-[400px] rounded-2xl overflow-hidden">
          <Image
            src="/images/2.jpg"
            alt="Hands typing on a laptop keyboard in a neon-lit environment with overlaid financial graphics, including a line graph labeled with months, bar charts, and numerical data, symbolizing financial analysis and technology."
            fill
            className="object-cover"
            priority
          />
        </div>

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