import type { Metadata } from "next";
import Link from "next/link";
import { services } from "@/lib/services";
import JsonLd from "@/components/JsonLd";
import { site } from "@/lib/site";

export const metadata: Metadata = {
  title: "Services",
  description: "Fixed-scope sprints and managed plans for email, Cloudflare, web and ops.",
  alternates: { canonical: "/services" }
};

export default function ServicesIndex() {
  const collectionLd = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: "Services",
    url: `${site.url}/services`,
    hasPart: services.map((s) => ({ "@type": "Service", name: s.title, description: s.excerpt, url: `${site.url}/services/${s.slug}` }))
  };
  return (
    <section className="container py-12">
      <h1 className="text-3xl font-semibold tracking-tight">Services</h1>
      <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {services.map(s => (
          <article key={s.slug} className="card">
            <div className="text-xs uppercase tracking-wide text-accent">{s.category}</div>
            <h3 className="mt-1 text-lg font-semibold">{s.title}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{s.excerpt}</p>
            <div className="mt-4 flex items-center justify-between">
              <span className="text-sm font-semibold">{s.price}</span>
              <Link className="no-underline rounded-xl border px-3 py-2 text-sm" href={`/services/${s.slug}`}>View</Link>
            </div>
          </article>
        ))}
      </div>
      <JsonLd data={collectionLd} />
    </section>
  );
}