import Link from "next/link";
import type { Metadata } from "next";
import { COMPANY_NAME, SITE_URL, getServicePillars } from "@/data/services";

export const metadata: Metadata = {
  title: "Serviços",
  description:
    "Conheça as 3 páginas pilar de serviços da Kontec Engenharia: Instalações Elétricas (com SPDA), Sistemas Contra Incêndio (com AVCB) e Hidráulica Predial.",
  alternates: { canonical: "/servicos" },
  openGraph: {
    title: `Serviços | ${COMPANY_NAME}`,
    description:
      "Arquitetura pilar e cluster de serviços técnicos da Kontec Engenharia.",
    url: `${SITE_URL}/servicos`,
  },
};

export default function ServicosPage() {
  const pillars = getServicePillars();

  return (
    <>
      <section className="bg-black text-white py-12 px-4" aria-label="Serviços">
        <div className="max-w-5xl mx-auto">
          <nav aria-label="Breadcrumb" className="mb-4">
            <ol className="flex items-center gap-2 text-sm text-gray-300">
              <li>
                <Link href="/" className="hover:text-white">
                  Home
                </Link>
              </li>
              <li aria-hidden="true">❱</li>
              <li className="text-white">Serviços</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">Serviços</h1>
        </div>
      </section>

      <section className="py-12 px-4" aria-label="Páginas pilar">
        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {pillars.map((pillar) => (
            <Link
              key={pillar.slug}
              href={`/servicos/${pillar.slug}`}
              className="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow p-6 border border-gray-100">
              <h2 className="text-xl font-bold text-primary mb-2">
                {pillar.title}
              </h2>
              <p className="text-text text-sm leading-relaxed mb-4">
                {pillar.description}
              </p>
              <span className="inline-flex items-center text-secondary font-semibold text-sm">
                Ver pilar ({pillar.clusterSlugs.length} páginas no cluster)
              </span>
            </Link>
          ))}
        </div>
      </section>
    </>
  );
}