import Link from "next/link";
import { t } from "@/lib/i18n";
import { ThemeToggle } from "./ThemeToggle";

const NAV = [
  ["/research", "nav.research"],
  ["/topics", "nav.topics"],
  ["/series", "nav.series"],
  ["/methodology", "nav.methodology"],
  ["/infrastructure", "nav.infrastructure"],
  ["/transparency", "nav.transparency"],
  ["/about", "nav.about"],
] as const;

export function SiteHeader() {
  return (
    <header
      className="sticky top-0 z-40 border-b hairline backdrop-blur"
      style={{ background: "color-mix(in oklab, var(--bg) 88%, transparent)" }}
    >
      <div className="container-x flex h-14 items-center justify-between gap-4">
        <Link href="/" className="flex items-baseline gap-2 no-underline">
          <span className="serif text-lg font-semibold tracking-tight">AutoScholar</span>
          <span className="subtle text-xs">.ai</span>
        </Link>
        <nav aria-label="Primary" className="hidden items-center gap-5 md:flex">
          {NAV.map(([href, key]) => (
            <Link key={href} href={href} className="muted text-sm hover:text-[var(--fg)]">
              {t(key)}
            </Link>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <Link href="/research" className="btn btn-sm md:hidden">
            {t("nav.research")}
          </Link>
          <ThemeToggle label={t("theme.toggle")} />
        </div>
      </div>
      <nav aria-label="Secondary" className="container-x flex gap-4 overflow-x-auto py-2 md:hidden">
        {NAV.slice(1).map(([href, key]) => (
          <Link key={href} href={href} className="muted whitespace-nowrap text-xs">
            {t(key)}
          </Link>
        ))}
      </nav>
    </header>
  );
}