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

export const metadata: Metadata = pageMetadata({
  title: "Iluminação em Goiânia | Luminárias, LED e Mais",
  description: "Encontre iluminação para casa, comércio e áreas externas na Portal em Goiânia. Explore o catálogo e envie fotos, medidas e referências para cotação.",
  path: "/iluminacao",
});

const quoteUrl = whatsappUrl("Olá, Portal! Quero cotar iluminação para um ambiente. Vou enviar fotos, medidas e explicar como o espaço será usado.");

export default function LightingPage() {
  const lightingProducts = realProducts.filter((product) => product.category === "iluminacao" && product.image).slice(0, 4);
  return (
    <main id="conteudo-principal">
      <Breadcrumb items={[{ label: "Iluminação" }]} />
      <PageHero eyebrow="Iluminação em Goiânia" title="A luz certa começa pelo uso do ambiente." description="Uma sala, uma loja e uma área externa pedem escolhas diferentes. Conte como o espaço será usado, envie suas referências e converse com a Portal sobre lâmpadas, luminárias e acessórios." primary={{ href: quoteUrl, label: "Cotar iluminação pelo WhatsApp ↗" }} secondary={{ href: "/produtos/iluminacao", label: "Explorar iluminação" }} image={{ src: "/images/iluminacao-pendentes.jpg", alt: "Pendentes contemporâneos iluminando um ambiente interno", credit: "Imagem ilustrativa · Unsplash", width: 1600, height: 2400 }} />

      <section className="section" id="ambientes"><div className="shell">
        <SectionHeading eyebrow="Por ambiente" title="O que você quer iluminar?" description="Comece pelo espaço e pela atividade. As características do produto precisam combinar com a instalação." />
        <div className="environment-grid">
          <article><span>Casa</span><h3>Residencial</h3><p>Iluminação para salas, quartos, cozinhas, banheiros e circulação.</p></article>
          <article><span>Negócio</span><h3>Comercial</h3><p>Luz para lojas, escritórios, recepções e áreas de trabalho.</p></article>
          <article><span>Exposição</span><h3>Áreas externas</h3><p>Opções conforme as condições de umidade, poeira e uso do local.</p></article>
          <article><span>Composição</span><h3>Decorativa</h3><p>Pendentes, fitas, perfis e spots para compor o ambiente.</p></article>
        </div>
      </div></section>

      <section className="section section--cream"><div className="shell split-copy">
        <div><p className="eyebrow">Prepare sua consulta</p><h2>Mostre o ambiente. Conte o resultado que procura.</h2><p>Fotos, medidas e referências visuais ajudam a explicar sua ideia. Se já existe um projeto de iluminação, envie também a relação especificada.</p></div>
        <div><ul className="check-list"><li>Uso e dimensões do ambiente</li><li>Fotos e referências de efeito visual</li><li>Iluminação geral, de tarefa ou decorativa</li><li>Condições de exposição do local</li><li>Informações da instalação disponíveis no projeto</li></ul></div>
      </div></section>

      <section className="section real-catalog"><div className="shell">
        <SectionHeading eyebrow="No catálogo" title="Referências para sua próxima escolha." description="Veja produtos, marcas e códigos para iniciar a consulta. Modelos, disponibilidade e condições são confirmados pela equipe." />
        <div className="rc-grid">{lightingProducts.map((product) => <RealProductCard key={product.code} product={product} />)}</div>
        <Link className="button button--dark" href="/produtos/iluminacao">Explorar catálogo de iluminação →</Link>
      </div></section>

      <section className="section technical-callout"><div className="shell technical-callout__inner">
        <div><p className="eyebrow">Na hora de comparar</p><h2>Olhe além da potência.</h2></div>
        <p>Compare as características informadas pelo fabricante, como fluxo luminoso, temperatura de cor e compatibilidade com a instalação. Para dimensionar ou alterar a instalação elétrica, procure um profissional habilitado.</p>
      </div></section>

      <section className="final-cta"><div className="shell final-cta__inner">
        <div><p className="eyebrow">Seu ambiente</p><h2>Vamos conversar sobre a iluminação do seu espaço?</h2></div>
        <div><p>Envie fotos, medidas ou a lista do projeto diretamente no WhatsApp.</p><a className="button button--dark" href={quoteUrl} data-cta="iluminacao_ambiente_whatsapp" target="_blank" rel="noopener noreferrer">Cotar iluminação ↗</a></div>
      </div></section>
    </main>
  );
}