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: "Materiais Elétricos para Eletricistas em Goiânia | Portal",
  description: "Cote materiais para instalação e manutenção com a Portal em Goiânia. Envie referências, quantidades e a lista do seu próximo serviço pelo WhatsApp.",
  path: "/eletricistas",
});

const quoteUrl = whatsappUrl("Olá, Portal! Sou eletricista e quero cotar os materiais de um serviço. Vou enviar minha lista, as quantidades e as referências que preciso.");

export default function ElectriciansPage() {
  return (
    <main id="conteudo-principal">
      <Breadcrumb items={[{ label: "Eletricistas" }]} />
      <PageHero eyebrow="Para eletricistas e instaladores" title="Seu próximo serviço começa com uma lista bem resolvida." description="Falta uma referência? Precisa completar os materiais da instalação? Envie sua lista à Portal e converse sobre os itens, quantidades e condições antes de ir para a obra." primary={{ href: quoteUrl, label: "Cotar a lista do meu serviço ↗" }} secondary={{ href: "/produtos", label: "Encontrar materiais" }} image={{ src: "/images/electricista-painel.jpg", alt: "Eletricista realizando medição em um painel elétrico", credit: "Imagem ilustrativa · Unsplash" }} />
      <section className="section"><div className="shell">
        <SectionHeading eyebrow="Da instalação à manutenção" title="Cada item certo começa por uma informação clara." description="Quando a lista vem com o contexto do serviço, fica mais fácil conferir o que deve entrar na cotação." />
        <div className="value-grid">
          <article><h3>Material novo</h3><p>Compartilhe a relação prevista no projeto, com quantidades, unidades e referências especificadas.</p></article>
          <article><h3>Reposição</h3><p>Envie a referência do componente ou uma foto legível da etiqueta, quando puder obtê-la com segurança.</p></article>
          <article><h3>Lista incompleta</h3><p>Diga quais itens já possui e o que ainda precisa comprar para organizar a consulta.</p></article>
          <article><h3>Próxima etapa</h3><p>Identifique os materiais prioritários e a data desejada. Disponibilidade e prazo são confirmados na cotação.</p></article>
        </div>
      </div></section>
      <section className="section section--cream"><div className="shell split-copy">
        <div><p className="eyebrow">Prepare a cotação</p><h2>A lista pode vir do jeito que você já trabalha.</h2><p>Foto, PDF, planilha ou mensagem: envie os arquivos diretamente no WhatsApp, sem refazer tudo em um formulário.</p><Link className="button button--ghost" href="/conteudos/como-organizar-lista-material-eletrico">Ver como organizar a lista</Link></div>
        <div><ul className="check-list"><li>Nome ou referência dos materiais</li><li>Quantidade e unidade de cada item</li><li>Marca especificada, quando houver</li><li>Cidade e data desejada para o serviço</li></ul><p>Dimensionamento e substituições devem ser validados pelo responsável técnico da instalação.</p></div>
      </div></section>
      <section className="section"><div className="shell split-copy">
        <div><p className="eyebrow">Serviços industriais</p><h2>O trabalho também envolve um quadro ou painel?</h2></div>
        <div><p>Além dos componentes, a Portal fornece soluções em painéis elétricos, engenharia e automação. Compartilhe a aplicação e os documentos disponíveis para conversar sobre o escopo da sua demanda.</p><div className="button-row"><Link className="button button--ghost" href="/solucoes/paineis-eletricos">Conhecer painéis elétricos</Link><Link className="button button--ghost" href="/solucoes/engenharia-eletrica">Conhecer engenharia</Link></div></div>
      </div></section>
      <section className="final-cta"><div className="shell final-cta__inner">
        <div><p className="eyebrow">Seu próximo serviço</p><h2>Vamos conferir os materiais da sua lista?</h2></div>
        <div><p>Envie as referências e conte o que precisa. Você revisa a mensagem antes de enviá-la no WhatsApp.</p><a className="button button--dark" href={quoteUrl} data-cta="eletricistas_lista_whatsapp" target="_blank" rel="noopener noreferrer">Cotar materiais do serviço ↗</a></div>
      </div></section>
    </main>
  );
}