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

export const metadata: Metadata = {
  title: "Informações",
  description: `Conheça todas as informações e serviços da ${COMPANY_NAME}. Soluções em SPDA, AVCB, instalações elétricas, hidráulicas e sistemas contra incêndio em São Paulo.`,
  alternates: { canonical: "/informacoes" },
  openGraph: {
    title: `Informações | ${COMPANY_NAME}`,
    description: "Conheça todos os serviços oferecidos pela Kontec Engenharia.",
    url: `${SITE_URL}/informacoes`,
  },
};

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

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

      <section className="py-10 px-4 bg-gray-light" aria-label="Páginas pilar">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold text-primary mb-6 text-center">
            Páginas Pilar de Serviços
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {pillars.map((pillar) => (
              <Link
                key={pillar.slug}
                href={`/servicos/${pillar.slug}`}
                className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                <h3 className="font-semibold text-primary text-sm mb-2">
                  {pillar.title}
                </h3>
                <p className="text-xs text-text leading-relaxed line-clamp-3">
                  {pillar.description}
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section
        className="py-12 px-4"
        aria-label="Lista de serviços por cluster">
        <div className="max-w-7xl mx-auto">
          {pillars.map((pillar) => {
            const clusterServices = pillar.clusterSlugs
              .map((slug) => getServiceBySlug(slug))
              .filter(Boolean);

            return (
              <div key={pillar.slug} className="mb-12">
                <div className="flex items-center justify-between gap-4 mb-5">
                  <h2 className="text-2xl font-bold text-primary">
                    {pillar.title}
                  </h2>
                  <Link
                    href={`/servicos/${pillar.slug}`}
                    className="text-sm font-semibold text-secondary hover:text-secondary-dark transition-colors">
                    Ver página pilar →
                  </Link>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                  {clusterServices.map((service) => (
                    <Link
                      key={service!.slug}
                      href={`/${service!.slug}`}
                      className="group block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                      <div className="relative aspect-[4/3] bg-gray-200">
                        <Image
                          src={`/images/informacoes/${service!.imageSourceSlug || service!.slug}-01.webp`}
                          alt={`Imagem ilustrativa de ${service!.title}`}
                          fill
                          sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
                          className="object-cover group-hover:scale-105 transition-transform duration-300"
                          loading="lazy"
                        />
                      </div>
                      <div className="p-4">
                        <h3 className="text-sm font-semibold text-primary group-hover:text-secondary transition-colors">
                          {service!.title}
                        </h3>
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <section id="faq" className="py-12 px-4 bg-gray-light" aria-label="FAQ">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold text-primary mb-6">
            FAQ - Dúvidas Frequentes
          </h2>
          <div className="space-y-4">
            {[
              {
                question: "Quais tipos de serviço a Kontec executa?",
                answer:
                  "Atuamos com SPDA, AVCB, instalações elétricas, sistemas contra incêndio e hidráulica predial para projetos comerciais, industriais e residenciais.",
              },
              {
                question: "A empresa atende apenas São Paulo?",
                answer:
                  "Nossa base está em São Paulo, mas atendemos em diferentes regiões conforme o escopo técnico de cada projeto.",
              },
              {
                question: "Como solicitar um orçamento técnico?",
                answer:
                  "Você pode enviar os detalhes do projeto pela página de contato para que nossa equipe avalie e retorne com uma proposta.",
              },
            ].map((item) => (
              <article
                key={item.question}
                className="bg-white rounded-lg p-5 border border-gray-100 shadow-sm">
                <h3 className="font-semibold text-primary mb-2">
                  {item.question}
                </h3>
                <p className="text-text text-sm leading-relaxed">
                  {item.answer}
                </p>
              </article>
            ))}
          </div>
          <div className="mt-6">
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center text-secondary font-semibold hover:text-secondary-dark transition-colors">
              Falar no WhatsApp →
            </a>
          </div>
        </div>
      </section>
    </>
  );
}