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

export const metadata: Metadata = {
  title: "Projetos",
  description: `Conheça os projetos realizados pela ${COMPANY_NAME}. Construtora, execução, instalações elétricas, hidráulicas, laboratórios e mais. São Paulo - SP.`,
  alternates: { canonical: "/projetos" },
  openGraph: {
    title: `Projetos | ${COMPANY_NAME}`,
    description: "Confira os projetos realizados pela Kontec Engenharia.",
    url: `${SITE_URL}/projetos`,
  },
};

export default function ProjetosPage() {
  return (
    <>
      {/* Hero */}
      <section className="bg-black text-white py-12 px-4" aria-label="Projetos">
        <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">Projetos</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">Projetos</h1>
        </div>
      </section>

      {/* Project grid */}
      <section className="py-12 px-4" aria-label="Categorias de projetos">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {projectCategories.map((project) => (
              <Link
                key={project.slug}
                href={`/projetos/${project.slug}`}
                className="group block bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                <div className="relative aspect-[16/10] bg-gray-200">
                  <Image
                    src={getProjectCoverImageBySlug(project.slug)}
                    alt={`Projeto ${project.title} - Kontec Engenharia`}
                    fill
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                    loading="lazy"
                  />
                </div>
                <div className="p-5">
                  <h2 className="text-lg font-bold text-primary group-hover:text-secondary transition-colors">
                    {project.title}
                  </h2>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}