import type { Metadata } from "next";
import Link from "../../components/site-link";
import { Breadcrumb } from "../../components/breadcrumb";
import { PageHero } from "../../components/page-hero";
import { SectionHeading } from "../../components/section-heading";
import { pageMetadata } from "../../lib/metadata";
import { whatsappUrl } from "../../lib/whatsapp";

export const metadata: Metadata = pageMetadata({
  title: "Guia de Compra de Materiais Elétricos | Portal Goiânia",
  description: "Saiba como organizar sua lista de materiais elétricos, informar quantidades e referências e preparar uma cotação para sua obra ou instalação.",
  path: "/conteudos",
});

export default function ContentPage() {
  return (
    <main id="conteudo-principal">
      <Breadcrumb items={[{ label: "Conteúdos" }]} />
      <PageHero eyebrow="Guia de compra" title="Uma compra bem organizada começa antes da cotação." description="Reúna referências, quantidades e prioridades da instalação. Nosso guia ajuda você a preparar uma lista mais clara para conversar com a equipe." primary={{ href: "/conteudos/como-organizar-lista-material-eletrico", label: "Ler o guia de materiais" }} secondary={{ href: "/produtos", label: "Explorar catálogo" }} />
      <section className="section" id="biblioteca"><div className="shell split-copy">
        <div><SectionHeading eyebrow="Planejamento" title="Como organizar uma lista de material elétrico." description="Separe os itens por ambiente ou etapa, mantenha as especificações e confira as unidades antes de pedir o orçamento." /><Link className="button button--dark" href="/conteudos/como-organizar-lista-material-eletrico">Abrir o guia completo →</Link></div>
        <div><h2>O que você encontra no guia</h2><ul className="check-list"><li>Informações para identificar cada material</li><li>Como apresentar quantidades e unidades</li><li>Organização por etapa da obra</li><li>O que revisar antes de enviar a lista</li></ul><p>O guia ajuda a organizar a compra e não substitui o projeto ou a orientação de um profissional habilitado.</p></div>
      </div></section>
      <section className="section section--cream"><div className="shell split-copy">
        <div><p className="eyebrow">Sua compra na prática</p><h2>Já tem uma lista? Não precisa começar de novo.</h2></div>
        <div><p>Envie o arquivo que você já usa no WhatsApp. Se ainda faltam referências ou quantidades, sinalize quais informações precisam ser conferidas.</p><a className="button button--primary" href={whatsappUrl("Olá, Portal! Li o guia de materiais e quero conversar sobre a minha lista para cotação.")} data-cta="conteudos_lista_whatsapp" target="_blank" rel="noopener noreferrer">Conversar sobre minha lista ↗</a></div>
      </div></section>
    </main>
  );
}