import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

import { getDictionary, hasLocale } from "@/app/[lang]/dictionaries";
import { siteUrl } from "@/lib/env";
import { buildPageMetadata } from "@/lib/seo/pages";
import { servicePageGraph } from "@/lib/seo/structured-data";
import { Container } from "@/components/ui/container";
import { Heading } from "@/components/ui/heading";
import { JsonLdScript } from "@/components/meta/json-ld-script";

export async function generateMetadata({
  params,
}: PageProps<"/[lang]/services">): Promise<Metadata> {
  const { lang } = await params;
  return buildPageMetadata("/services", lang);
}

export default async function ServicesPage({
  params,
}: PageProps<"/[lang]/services">) {
  const { lang } = await params;
  if (!hasLocale(lang)) notFound();
  const dict = await getDictionary(lang);
  const s = dict.nav.servicesItems;

  const services = [
    { ...s.seoCode, href: `/${lang}/services/seo-code-optimization` },
    { ...s.wpManagement, href: `/${lang}/services/wordpress-management` },
    { ...s.wpSeo, href: `/${lang}/services/wordpress-seo` },
    { ...s.cmsOptimization, href: `/${lang}/services/cms-optimization` },
  ];

  // Service + BreadcrumbList structured data (FS-H14). This page has no FAQ
  // section, so no FAQPage is emitted.
  const jsonLd = servicePageGraph({
    lang,
    name: dict.nav.services,
    description: services.map((svc) => svc.description).join(". "),
    breadcrumb: [
      { name: "SEO Insight", url: `${siteUrl}/${lang}` },
      { name: dict.nav.services, url: `${siteUrl}/${lang}/services` },
    ],
  });

  return (
    <Container className="flex min-h-[60vh] flex-col gap-10 py-24">
      <JsonLdScript data={jsonLd} />
      <Heading as="h1">{dict.nav.services}</Heading>
      <div className="grid gap-4 sm:grid-cols-2">
        {services.map((service) => (
          <Link
            key={service.href}
            href={service.href}
            className="border-hairline hover:bg-foreground/5 flex flex-col gap-2 rounded-2xl border p-6 transition-colors"
          >
            <span className="text-ink-1 text-lg font-semibold">
              {service.name}
            </span>
            <span className="text-ink-4 text-sm">{service.description}</span>
          </Link>
        ))}
      </div>
    </Container>
  );
}