import Link from "next/link";
import AuthButton from "@/components/auth-button";

const navLinks = [
  { label: "Presentation", href: "#presentation" },
  { label: "Grades", href: "#grades" },
  { label: "Events", href: "#events" },
  { label: "Discord", href: "#discord" },
];

export default function Navbar() {
  return (
    <header className="sticky top-0 z-40 w-full border-b border-white/5 bg-slate-950/70 backdrop-blur">
      <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
        <Link href="/" className="flex items-center gap-3">
          <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-linear-to-br from-violet-600 via-indigo-500 to-cyan-400 text-sm font-bold text-slate-950 shadow-[0_12px_30px_rgba(59,130,246,0.4)]">
            BU
          </span>
          <div className="flex flex-col">
            <span className="text-sm font-semibold uppercase tracking-[0.3em] text-white">
              BinouzUHC
            </span>
            <span className="text-xs text-slate-400">UHC PvP 1.8.X</span>
          </div>
        </Link>
        <nav className="hidden items-center gap-6 text-xs uppercase tracking-[0.25em] text-slate-300 md:flex">
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="transition hover:text-white"
            >
              {link.label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-3">
          <a
            href="#grades"
            className="hidden rounded-full border border-white/10 px-4 py-2 text-[10px] uppercase tracking-[0.3em] text-slate-300 transition hover:border-white/30 hover:text-white lg:inline-flex"
          >
            Boutique
          </a>
          <AuthButton compact />
        </div>
      </div>
    </header>
  );
}