import { LegacyContent } from "../../components/legacy-page";
import type { Metadata } from "next";
import Image from "next/image";
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: "Sobre a Portal Distribuidora | Desde 2008 em Goiânia",
  description: "Conheça a Portal Distribuidora em Goiânia: materiais elétricos, iluminação e soluções para obras, instalações e demandas industriais. Visite nossa loja.",
  path: "/sobre",
});

export default function AboutPage() {
  return (
    <main id="conteudo-principal">
      <Breadcrumb items={[{ label: "Sobre" }]} />
      <PageHero eyebrow="Desde 2008 em Goiânia" title="Materiais, soluções e uma equipe perto do seu projeto." description="A Portal Distribuidora atende quem constrói, instala e mantém a elétrica em funcionamento. Reunimos materiais elétricos, iluminação e soluções industriais em uma conversa que começa pela sua necessidade." primary={{ href: whatsappUrl("Olá, Portal! Quero conhecer o atendimento e conversar sobre os materiais ou soluções de que preciso."), label: "Falar com a equipe ↗" }} secondary={{ href: "/produtos", label: "Conhecer produtos" }} image={{ src: "/images/portal-fachada.webp", alt: "Fachada real da Portal Distribuidora em Goiânia", width: 726, height: 938 }} />

      <section className="section"><div className="shell purpose-grid">
        <div><p className="eyebrow">Da obra à indústria</p><h2>Demandas diferentes merecem uma conversa específica.</h2></div>
        <div><p className="lede">Uma reforma, a reposição de um componente e um novo painel elétrico pedem informações diferentes. Por isso, nosso atendimento começa pela aplicação, pelas referências e pelo contexto de cada demanda.</p><p>Atendemos clientes, eletricistas, instaladores e empresas. Você pode começar pelo catálogo, enviar uma lista ou conversar com a equipe sobre um projeto.</p></div>
      </div></section>

      <section className="section section--cream"><div className="shell">
        <SectionHeading eyebrow="O que você encontra na Portal" title="Do material ao escopo do projeto." />
        <div className="value-grid value-grid--three">
          <article><h3>Materiais elétricos</h3><p>Fios, cabos, proteção, infraestrutura e componentes para instalações e manutenção.</p><Link href="/produtos">Explorar materiais →</Link></article>
          <article><h3>Iluminação</h3><p>Produtos para ambientes residenciais, comerciais e externos, conforme a aplicação.</p><Link href="/iluminacao">Conhecer iluminação →</Link></article>
          <article><h3>Soluções industriais</h3><p>Painéis elétricos, engenharia e automação. Converse sobre o escopo e as necessidades da sua operação.</p><Link href="/solucoes/paineis-eletricos">Conhecer painéis e soluções →</Link></article>
        </div>
      </div></section>

      <section className="section"><div className="shell split-feature__grid">
        <figure className="split-feature__media"><Image src="/images/portal-loja-aerea.webp" alt="Vista aérea da loja Portal Distribuidora na Av. Ville, em Goiânia" width={1420} height={988} sizes="(max-width: 900px) 100vw, 45vw" /></figure>
        <div className="split-feature__copy"><p className="eyebrow">Nossa loja em Goiânia</p><h2>A Portal também está perto de você, pessoalmente.</h2><p>Estamos na Av. Ville, 1983, no Res. Center Ville. Traga sua lista ou fale com a equipe antes da visita para consultar os itens e o horário de atendimento.</p><div className="button-row"><Link className="button button--dark" href="/contato">Ver contato e localização</Link><Link className="button button--ghost" href="/empresas">Atendimento para empresas</Link></div></div>
      </div></section>
    <LegacyContent path="/sobre" expandable /></main>
  );
}