import Link from "next/link";
import type { Metadata } from "next";
import {
  COMPANY_ADDRESS,
  COMPANY_EMAIL,
  COMPANY_NAME,
  COMPANY_PHONE,
  SITE_URL,
  WHATSAPP_URL,
  regions,
} from "@/data/services";

export const metadata: Metadata = {
  title: "Atendimento em Sao Paulo",
  description:
    "Atendimento tecnico da Kontec Engenharia em Sao Paulo capital e Grande Sao Paulo para projetos eletricos, incendio e hidraulica predial.",
  alternates: { canonical: "/atendimento/sao-paulo" },
  openGraph: {
    title: `Atendimento em Sao Paulo | ${COMPANY_NAME}`,
    description:
      "Cobertura local com atendimento tecnico, vistoria e execucao para projetos de engenharia em Sao Paulo.",
    url: `${SITE_URL}/atendimento/sao-paulo`,
  },
};

const HIGHLIGHTED_REGIONS = [
  "Região Central",
  "Zona Norte",
  "Zona Sul",
  "Zona Leste",
  "Zona Oeste",
  "Grande São Paulo",
] as const;

export default function AtendimentoSaoPauloPage() {
  return (
    <>
      <section
        className="bg-black text-white py-12 px-4"
        aria-label="Atendimento em Sao Paulo">
        <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">Atendimento em Sao Paulo</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">
            Atendimento em Sao Paulo
          </h1>
          <p className="text-gray-200 max-w-3xl mt-2">
            Atuacao local com base operacional em Sao Paulo para vistoria,
            projeto, execucao e suporte tecnico em engenharia predial.
          </p>
        </div>
      </section>

      <section className="py-12 px-4" aria-label="Cobertura e operacao local">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
          <article className="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
            <h2 className="text-xl font-bold text-primary mb-3">
              Como funciona o atendimento local
            </h2>
            <ul className="list-disc pl-5 space-y-2 text-sm text-text leading-relaxed">
              <li>Triagem tecnica inicial por WhatsApp, telefone ou e-mail.</li>
              <li>Levantamento de dados e documentos do imovel.</li>
              <li>Vistoria tecnica presencial quando o escopo exige.</li>
              <li>Proposta com escopo, cronograma e etapas de execucao.</li>
              <li>Acompanhamento tecnico ate a entrega final.</li>
            </ul>
          </article>

          <article className="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
            <h2 className="text-xl font-bold text-primary mb-3">Base local</h2>
            <div className="space-y-3 text-sm text-text leading-relaxed">
              <p>
                <strong>Endereco:</strong> {COMPANY_ADDRESS}
              </p>
              <p>
                <strong>Telefone:</strong> {COMPANY_PHONE}
              </p>
              <p>
                <strong>E-mail:</strong> {COMPANY_EMAIL}
              </p>
              <p>
                <strong>Horario comercial:</strong> segunda a sexta, 8h as 18h.
              </p>
            </div>
          </article>
        </div>
      </section>

      <section
        className="py-12 px-4 bg-gray-light"
        aria-label="Regioes atendidas">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl font-bold text-primary mb-6">
            Regioes atendidas em Sao Paulo
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {HIGHLIGHTED_REGIONS.map((regionName) => {
              const neighborhoods = regions[regionName] ?? [];

              return (
                <article
                  key={regionName}
                  className="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
                  <h3 className="text-lg font-semibold text-primary mb-3">
                    {regionName}
                  </h3>
                  <p className="text-sm text-text leading-relaxed">
                    {neighborhoods.slice(0, 8).join(", ")}
                    {neighborhoods.length > 8 ? " e outros bairros." : "."}
                  </p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="py-12 px-4" aria-label="CTA atendimento local">
        <div className="max-w-5xl mx-auto bg-white rounded-xl border border-gray-100 p-8 shadow-sm">
          <h2 className="text-2xl font-bold text-primary mb-3">
            Precisa de atendimento tecnico em Sao Paulo?
          </h2>
          <p className="text-text leading-relaxed mb-5">
            Envie seu cenario e objetivo da obra para avaliarmos o melhor plano
            tecnico com prazos realistas.
          </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>
          </div>
        </div>
      </section>
    </>
  );
}