import { Link } from "@tanstack/react-router";

const nav = [
  { to: "/", label: "Overview" },
  { to: "/dataset", label: "Dataset" },
  { to: "/models", label: "Models" },
  { to: "/resources", label: "Resources" },
];

export function Header() {
  return (
    <header className="fixed top-0 inset-x-0 z-50 border-b border-soft bg-background/70 backdrop-blur-md">
      <div className="mx-auto max-w-7xl px-6 h-16 flex items-center justify-between">
        <Link to="/" className="flex items-center gap-2">
          <div className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-glow grid place-items-center text-[10px] font-bold text-primary-foreground">
            LSM
          </div>
          <span className="font-display font-bold tracking-tight">Large Spectrum Models</span>
        </Link>
        <nav className="hidden md:flex items-center gap-1">
          {nav.map((n) => (
            <Link
              key={n.to}
              to={n.to}
              className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
              activeProps={{ className: "px-3 py-2 text-sm text-foreground font-medium" }}
              activeOptions={{ exact: true }}
            >
              {n.label}
            </Link>
          ))}
          <a
            href="https://github.com/UNL-CPN-Lab/LSM.git"
            target="_blank"
            rel="noreferrer"
            className="ml-3 px-4 py-2 text-sm font-medium rounded-full bg-primary text-primary-foreground hover:opacity-90 transition"
          >
            GitHub
          </a>
        </nav>
      </div>
    </header>
  );
}