import type { Metadata } from "next";
import Link from "../../components/site-link";
import { Breadcrumb } from "../../components/breadcrumb";
import { PageHero } from "../../components/page-hero";
import { legacyPages } from "../../lib/legacy-pages.server";
import { pageMetadata } from "../../lib/metadata";

export const metadata: Metadata = pageMetadata({
  title: "Explore produtos, artigos e cidades atendidas | Portal",
  description: "Encontre as páginas da Portal: linhas de materiais elétricos, artigos, atendimento por cidade, atacado e informações sobre a empresa.",
  path: "/explorar",
});

const groups = [
  { id: "portal", kind: "page", title: "A Portal e nosso atendimento", label: "Portal e atendimento", description: "Conheça a empresa, fale com a equipe e consulte as opções de atendimento." },
  { id: "produtos", kind: "product", title: "Linhas de produtos", label: "Linhas de produtos", description: "Explore os materiais por linha e aplicação. Para pesquisar referências individuais, abra o catálogo de produtos." },
  { id: "cidades", kind: "region", title: "Cidades e regiões atendidas", label: "Cidades atendidas", description: "Encontre sua cidade e consulte as condições de atendimento com a equipe." },
  { id: "artigos", kind: "article", title: "Artigos e orientações", label: "Artigos do blog", description: "Conteúdos sobre materiais elétricos, iluminação e instalações." },
];

export default function ExplorePage() {
  return (
    <main id="conteudo-principal" className="explore-page">
      <Breadcrumb items={[{ label: "Explorar" }]} />
      <PageHero
        eyebrow="Explore a Portal"
        title="Encontre a página que você procura."
        description="Todos os caminhos para conhecer nossas linhas, ler os artigos e consultar o atendimento na sua região. Escolha um assunto para começar."
        primary={{ href: "/produtos", label: "Pesquisar no catálogo" }}
        secondary={{ href: "/contato", label: "Falar com a equipe" }}
      />
      <nav className="shell explore-shortcuts" aria-label="Assuntos desta página">
        {groups.map(group => (
          <Link className="button button--outline" key={group.id} href={`#${group.id}`}>{group.label}</Link>
        ))}
      </nav>
      {groups.map(group => {
        const pages = legacyPages.filter(page => page.kind === group.kind)
          .toSorted((a, b) => a.heading.localeCompare(b.heading, "pt-BR"));
        return (
          <section className="shell explore-section" id={group.id} key={group.id} aria-labelledby={`${group.id}-heading`}>
            <h2 id={`${group.id}-heading`}>{group.title} <span>({pages.length})</span></h2>
            <p>{group.description}</p>
            <ul className="explore-links">
              {pages.map(page => (
                <li key={page.path}>
                  <Link href={page.path}>
                    <span>{page.heading}</span><span aria-hidden="true">→</span>
                  </Link>
                </li>
              ))}
            </ul>
          </section>
        );
      })}
    </main>
  );
}