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

export const metadata: Metadata = {
  title: "Mapa do Site",
  description: `Mapa do site ${COMPANY_NAME}. Encontre todas as páginas e serviços disponíveis.`,
  alternates: { canonical: "/mapa-site" },
};

export default function MapaSitePage() {
  const pillars = getServicePillars();
  const indexableServices = getIndexableServices();

  return (
    <>
      <section
        className="bg-black text-white py-12 px-4"
        aria-label="Mapa do Site">
        <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">Mapa do Site</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">Mapa do Site</h1>
        </div>
      </section>

      <section className="py-12 px-4">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12">
          <div>
            <h2 className="text-xl font-bold text-primary mb-4">
              Páginas Principais
            </h2>
            <ul className="space-y-2">
              <li>
                <Link
                  href="/"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/quem-somos"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Quem Somos
                </Link>
              </li>
              <li>
                <Link
                  href="/projetos"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Projetos
                </Link>
              </li>
              <li>
                <Link
                  href="/cases"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Cases
                </Link>
              </li>
              <li>
                <Link
                  href="/informacoes"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Informações
                </Link>
              </li>
              <li>
                <Link
                  href="/faq"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  FAQ
                </Link>
              </li>
              <li>
                <Link
                  href="/normas/abnt-nbr-5419"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Norma ABNT NBR 5419
                </Link>
              </li>
              <li>
                <Link
                  href="/atendimento/sao-paulo"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Atendimento em Sao Paulo
                </Link>
              </li>
              <li>
                <Link
                  href="/servicos"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Serviços (Pilares)
                </Link>
              </li>
              <li>
                <Link
                  href="/contato"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Contato
                </Link>
              </li>
              <li>
                <Link
                  href="/recursos"
                  className="text-secondary hover:text-secondary-dark transition-colors">
                  Recursos e Artigos
                </Link>
              </li>
            </ul>

            <h2 className="text-xl font-bold text-primary mb-4 mt-8">
              Projetos
            </h2>
            <ul className="space-y-2">
              {projectCategories.map((p) => (
                <li key={p.slug}>
                  <Link
                    href={`/projetos/${p.slug}`}
                    className="text-secondary hover:text-secondary-dark transition-colors">
                    {p.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h2 className="text-xl font-bold text-primary mb-4">
              Páginas Pilar
            </h2>
            <ul className="space-y-2 mb-8">
              {pillars.map((pillar) => (
                <li key={pillar.slug}>
                  <Link
                    href={`/servicos/${pillar.slug}`}
                    className="text-secondary hover:text-secondary-dark transition-colors">
                    {pillar.title}
                  </Link>
                </li>
              ))}
            </ul>

            <h2 className="text-xl font-bold text-primary mb-4">
              Serviços (Cluster)
            </h2>
            <ul className="space-y-2">
              {indexableServices.map((s) => (
                <li key={s.slug}>
                  <Link
                    href={`/${s.slug}`}
                    className="text-secondary hover:text-secondary-dark transition-colors text-sm">
                    {s.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}