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

export const metadata: Metadata = {
  title: "Cases",
  description:
    "Hub de estudos de caso da Kontec Engenharia com projetos executados em instalacoes eletricas, sistemas contra incendio e hidraulica predial.",
  alternates: { canonical: "/cases" },
  openGraph: {
    title: `Cases | ${COMPANY_NAME}`,
    description:
      "Veja estudos de caso e projetos tecnicos executados pela Kontec Engenharia em Sao Paulo.",
    url: `${SITE_URL}/cases`,
  },
};

export default function CasesPage() {
  return (
    <>
      <section className="bg-black text-white py-12 px-4" aria-label="Cases">
        <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">Cases</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">
            Cases e Estudos de Caso
          </h1>
          <p className="text-gray-200 max-w-3xl mt-2">
            Projetos reais executados pela {COMPANY_NAME}, com foco em resultado
            tecnico, conformidade e seguranca operacional.
          </p>
        </div>
      </section>

      <section className="py-12 px-4" aria-label="Lista de cases">
        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projectCategories.map((project) => (
            <Link
              key={project.slug}
              href={`/projetos/${project.slug}`}
              className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100 p-6">
              <h2 className="text-lg font-bold text-primary mb-2">
                {project.title}
              </h2>
              <p className="text-sm text-text leading-relaxed mb-4">
                {project.description}
              </p>
              <span className="text-sm font-semibold text-secondary">
                Ver case completo →
              </span>
            </Link>
          ))}
        </div>
      </section>

      <section className="py-12 px-4 bg-gray-light" aria-label="CTA de contato">
        <div className="max-w-4xl mx-auto bg-white border border-gray-100 rounded-xl p-8 shadow-sm">
          <h2 className="text-2xl font-bold text-primary mb-3">
            Quer um projeto com o mesmo nivel de execucao?
          </h2>
          <p className="text-text leading-relaxed mb-5">
            Fale com nosso time tecnico e receba uma proposta alinhada ao seu
            escopo, prazos e requisitos normativos.
          </p>
          <div className="flex flex-wrap gap-3">
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center bg-accent hover:opacity-90 text-white font-semibold py-3 px-5 rounded-lg transition-opacity">
              Falar no WhatsApp
            </a>
            <Link
              href="/servicos"
              className="inline-flex items-center justify-center border border-primary text-primary hover:bg-primary hover:text-white font-semibold py-3 px-5 rounded-lg transition-colors">
              Ver servicos
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}