import Link from "next/link";
import type { Locale } from "@/i18n/config";
import { localizedHref } from "@/lib/utils";
import { Button } from "@/components/ui/Button";

type NavItem = { label: string; href: string };

const DEFAULT_NAV: NavItem[] = [
  { label: "Optics", href: "#optics" },
  { label: "Eyetracking", href: "#eyetracking" },
  { label: "Experiences", href: "#experiences" },
  { label: "Shop", href: "/shop" },
];

/**
 * Floating pill navigation (design-system signature). Fixed, centered, blurred
 * over the black hero with a hairline border. Lowercase wordmark, quiet links,
 * one outlined CTA.
 */
export function SiteHeader({
  locale,
  nav = DEFAULT_NAV,
  cta = { label: "Order now", href: "/shop" },
}: {
  locale: Locale;
  nav?: NavItem[];
  cta?: NavItem;
}) {
  return (
    <header className="pointer-events-none fixed inset-x-3 top-3 z-header md:inset-x-4 md:top-4">
      <div className="pointer-events-auto mx-auto flex max-w-5xl items-center justify-between gap-6 rounded-pill border border-white/12 bg-paper/60 py-2.5 pl-5 pr-2.5 backdrop-blur-xl">
        <Link
          href={localizedHref(locale, "/v2")}
          className="font-display text-base font-medium tracking-tight text-ink"
        >
          bigscreen
        </Link>

        <nav className="hidden items-center gap-7 md:flex">
          {nav.map((item) => (
            <Link
              key={item.href}
              href={item.href.startsWith("#") ? item.href : localizedHref(locale, item.href)}
              className="text-sm text-ink/60 transition-colors duration-fast hover:text-ink"
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <Button href={localizedHref(locale, cta.href)} variant="outline" size="sm">
          {cta.label}
        </Button>
      </div>
    </header>
  );
}