// Navbar — liquid-glass logo circle, center pill nav (desktop), balanced spacer.

const NAV_LINKS = [
  { label: "Home", href: "#home" },
  { label: "About", href: "#about" },
  { label: "What I Do", href: "#what-i-do" },
  { label: "Work", href: "#work" },
  { label: "Contact", href: "#contact" },
];

function Navbar() {
  const ArrowUpRight = window.ArrowUpRight;
  return (
    <nav className="fixed top-4 left-0 right-0 z-50 px-8 lg:px-16 flex items-center justify-between">
      {/* Logo */}
      <a
        href="#home"
        className="liquid-glass rounded-full w-12 h-12 flex items-center justify-center transition-transform duration-300 hover:scale-110"
      >
        <span className="font-heading italic text-white text-2xl leading-none">m</span>
      </a>

      {/* Center nav (desktop only) */}
      <div className="hidden md:flex items-center gap-2">
        <div className="liquid-glass rounded-full px-1.5 py-1.5 flex items-center">
          {NAV_LINKS.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="px-3 py-2 text-sm font-medium text-white/90 font-body transition-colors duration-300 hover:text-white"
            >
              {link.label}
            </a>
          ))}
        </div>
        <a
          href="mailto:nguyenthaiduybusiness@gmail.com"
          className="rounded-full bg-white text-black px-4 py-2.5 text-sm font-medium font-body flex items-center gap-1.5 whitespace-nowrap transition-transform duration-300 hover:scale-105"
        >
          Contact Me
          <ArrowUpRight className="h-4 w-4" />
        </a>
      </div>

      {/* Invisible spacer to balance the logo */}
      <div className="w-12 h-12 invisible" aria-hidden="true"></div>
    </nav>
  );
}

window.Navbar = Navbar;