import Link from "next/link";
import { SERVICES, SITE, type Lang } from "@/lib/config";

export const revalidate = SITE.revalidateSeconds;

export default function ServicesIndex({ params }: { params: { lang: Lang } }) {
  const { lang } = params;
  return (
    <main className="max-w-6xl mx-auto px-4 py-16">
      <h1 className="text-3xl font-bold">
        {lang === "ar" ? "الخدمات" : "Services"}
      </h1>
      <div className="grid md:grid-cols-3 gap-6 mt-6">
        {Object.entries(SERVICES).map(([key, svc]) => (
          <Link
            key={key}
            href={`/${lang}/services/${svc.slug[lang]}`}
            className="border rounded-xl p-6 hover:border-brand-green transition"
          >
            <div className="text-3xl">{svc.icon}</div>
            <h3 className="mt-2 text-xl font-semibold">{svc.name[lang]}</h3>
            <p className="text-neutral-600">{svc.summary[lang]}</p>
          </Link>
        ))}
      </div>
    </main>
  );
}