import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Image from 'next/image';
import Link from '../../../components/site-link';
import { Breadcrumb } from '../../../components/breadcrumb';
import { JsonLd } from '../../../components/json-ld';
import { RealProductCard } from '../../../components/real-product-card';
import { featuredBrands } from '../../../lib/featured-brands';
import { brandContent } from '../../../lib/brand-content';
import { catalogPage, productPath, realCategories, realProducts } from '../../../lib/real-catalog.server';
import { slugify } from '../../../lib/catalog-policy.mjs';
import { pageMetadata, SITE_URL } from '../../../lib/metadata';
import { whatsappUrl } from '../../../lib/whatsapp';

type Props = { params: Promise<{ brand: string }> };
export function generateStaticParams() { return featuredBrands.map(brand => ({ brand: brand.slug })); }
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { brand: slug } = await params;
  const brand = featuredBrands.find(item => item.slug === slug);
  if (!brand) notFound();
  return pageMetadata({ title: `${brand.name} em Goiânia — ${brandContent[slug].line} | Portal`, description: brandContent[slug].intro, path: `/marcas/${slug}` });
}

export default async function BrandPage({ params }: Props) {
  const { brand: slug } = await params;
  const brand = featuredBrands.find(item => item.slug === slug);
  if (!brand) notFound();
  const content = brandContent[slug];
  const pool = realProducts.filter(product => slugify(product.brand) === slug);
  const categories = realCategories.filter(category => pool.some(product => product.category === category.slug));
  const selection = catalogPage(undefined, { marca: slug }).items.slice(0, 8);
  const path = `/marcas/${slug}`;
  return <main id="conteudo-principal" className="real-catalog brand-detail"><Breadcrumb items={[{ label: 'Marcas', href: '/marcas' }, { label: brand.name }]} />
    <JsonLd data={{ '@context': 'https://schema.org', '@type': 'CollectionPage', name: `${brand.name} na Portal Distribuidora`, description: content.intro, url: SITE_URL + path, mainEntity: { '@type': 'ItemList', itemListElement: selection.map((product, index) => ({ '@type': 'ListItem', position: index + 1, name: product.name, url: SITE_URL + productPath(product) })) } }} />
    <section className="brand-detail__intro"><div className="shell"><Image className="brand-detail__logo" src={`/images/marcas/${slug}.png`} width={280} height={100} alt={brand.name} unoptimized priority /><p className="eyebrow">{content.line}</p><h1>Produtos {brand.name} em Goiânia.</h1><p className="lede">{content.intro}</p><div className="button-row"><a className="button button--primary" href={whatsappUrl(`Olá, Portal! Quero cotar produtos ${brand.name}. Vou enviar as referências e quantidades da minha lista para consultar modelos e condições.`)} data-cta={`marca_${slug}_whatsapp`} target="_blank" rel="noopener noreferrer">Cotar produtos {brand.name} ↗</a><Link className="button button--ghost" href={`/produtos?marca=${slug}`}>Ver catálogo da marca</Link></div></div></section>
    <div className="shell brand-detail__content"><section aria-labelledby="brand-lines"><h2 id="brand-lines">Explore {brand.name} por linha.</h2><ul className="brand-detail__lines">{categories.map(category => <li key={category.slug}><Link href={`/produtos/${category.slug}?marca=${slug}`}>{category.name} <span aria-hidden="true">↗</span></Link></li>)}</ul></section>
      <section aria-labelledby="brand-products"><h2 id="brand-products">Referências para sua cotação.</h2><p className="rc-consult-note">Seleção do catálogo, sem indicação de estoque em tempo real. Confirme modelos, unidades e disponibilidade com a equipe.</p><div className="rc-grid">{selection.map(product => <RealProductCard key={product.code} product={product} />)}</div><div className="button-row"><Link className="button button--ghost" href={`/produtos?marca=${slug}`}>Explorar todas as referências {brand.name} →</Link></div></section>
      <section className="brand-detail__guide"><h2>O que enviar para cotar {brand.name}?</h2><p>{content.checklist}</p><Link href="/orcamento">Organizar minha lista de materiais →</Link></section>
      <p className="rc-consult-note">As marcas identificam os fabricantes dos produtos. A presença nesta página não declara representação exclusiva ou revenda autorizada. Aplicação e compatibilidade devem ser conferidas pelo profissional responsável.</p>
    </div>
  </main>;
}