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

const FAQ_ITEMS = [
  {
    question: "Quais servicos a Kontec Engenharia executa?",
    answer:
      "Executamos projetos e servicos em instalacoes eletricas, sistemas contra incendio, SPDA, AVCB e hidraulica predial para operacoes comerciais, industriais e residenciais.",
  },
  {
    question: "A empresa atende apenas a cidade de Sao Paulo?",
    answer:
      "Nossa base esta em Sao Paulo e atendemos capital, Grande Sao Paulo e regioes proximas conforme escopo tecnico e cronograma do projeto.",
  },
  {
    question: "Como funciona o processo de atendimento?",
    answer:
      "Primeiro analisamos a demanda tecnica, depois enviamos orientacoes iniciais, vistoria quando necessario e proposta com escopo, prazo e investimento.",
  },
  {
    question: "A Kontec emite ART e laudos tecnicos?",
    answer:
      "Sim. A emissao de ART e laudos depende do tipo de servico contratado e das exigencias do projeto e dos orgaos competentes.",
  },
  {
    question: "Qual o melhor canal para solicitar orcamento?",
    answer:
      "O canal principal e o WhatsApp da empresa, onde voce pode enviar detalhes, fotos e documentos para agilizar a analise inicial.",
  },
  {
    question: "Vocês atuam com adequacao a norma ABNT NBR 5419?",
    answer:
      "Sim. Atuamos com projetos, analises e adequacoes relacionadas ao SPDA seguindo os criterios tecnicos aplicaveis da ABNT NBR 5419.",
  },
];

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: FAQ_ITEMS.map((item) => ({
    "@type": "Question",
    name: item.question,
    acceptedAnswer: {
      "@type": "Answer",
      text: item.answer,
    },
  })),
};

export const metadata: Metadata = {
  title: "FAQ",
  description:
    "Duvidas frequentes sobre servicos de engenharia, prazos, laudos, ART e atendimento da Kontec Engenharia.",
  alternates: { canonical: "/faq" },
  openGraph: {
    title: `FAQ | ${COMPANY_NAME}`,
    description: "Respostas diretas para as duvidas mais comuns de clientes.",
    url: `${SITE_URL}/faq`,
  },
};

export default function FaqPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />

      <section className="bg-black text-white py-12 px-4" aria-label="FAQ">
        <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">FAQ</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">FAQ</h1>
          <p className="text-gray-200 max-w-3xl mt-2">
            Tire duvidas sobre escopo tecnico, prazos, conformidade e processo
            de atendimento.
          </p>
        </div>
      </section>

      <section className="py-12 px-4" aria-label="Perguntas frequentes">
        <div className="max-w-4xl mx-auto space-y-4">
          {FAQ_ITEMS.map((item) => (
            <article
              key={item.question}
              className="bg-white border border-gray-100 rounded-lg p-6 shadow-sm">
              <h2 className="text-lg font-semibold text-primary mb-2">
                {item.question}
              </h2>
              <p className="text-text leading-relaxed text-sm">{item.answer}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="py-12 px-4 bg-gray-light" aria-label="CTA FAQ">
        <div className="max-w-4xl mx-auto bg-white rounded-xl border border-gray-100 p-8 shadow-sm">
          <h2 className="text-2xl font-bold text-primary mb-3">
            Ainda precisa de ajuda para o seu projeto?
          </h2>
          <p className="text-text leading-relaxed mb-5">
            Nossa equipe pode analisar seu cenario e orientar os proximos passos
            com foco tecnico e comercial.
          </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="/cases"
              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 cases
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}