"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export function SubnavBar() {
  const pathname = usePathname();
  const locale = pathname.startsWith("/en") ? "en" : "pt";
  const base = `/${locale}`;

  const sections = [
    {
      key: "sobre",
      label: locale === "en" ? "About APP" : "Sobre a APP",
      path: `${base}/sobre`,
      items: [
        { label: locale === "en" ? "About" : "Quem Somos", href: `${base}/sobre/quem-somos` },
        { label: locale === "en" ? "Contacts" : "Contatos", href: `${base}/sobre/contatos` },
      ],
    },
    {
      key: "competicoes",
      label: locale === "en" ? "Competitions" : "Competições",
      path: `${base}/competicoes`,
      items: [
        { label: locale === "en" ? "Calendar" : "Calendário", href: `${base}/competicoes/calendario` },
        { label: locale === "en" ? "Results" : "Resultados", href: `${base}/competicoes/resultados` },
        { label: locale === "en" ? "Photos" : "Fotos", href: `${base}/competicoes/fotos` },
      ],
    },
    {
      key: "regras",
      label: locale === "en" ? "Rules" : "Regras",
      path: `${base}/regras`,
      items: [
        { label: "Regras/Info. IPF", href: `${base}/regras/ipf-rule-book` },
        { label: locale === "en" ? "Anti-Doping" : "Anti-Doping", href: `${base}/regras/anti-doping` },
      ],
    },
  ];

  const current = sections.find((s) => pathname.startsWith(s.path));
  if (!current) return null;

  const isActive = (href: string) => pathname.startsWith(href);

  return (
    <div className="subnav-bar" role="navigation" aria-label={`${current.label} submenus`}>
      <div className="container subnav">
        {current.items.map((it) => (
          <Link key={it.href} href={it.href} className={isActive(it.href) ? "active" : ""}>{it.label}</Link>
        ))}
      </div>
    </div>
  );
}
