import Link from "next/link";

const NAV_LINKS = [
  { href: "/", label: "Home" },
  { href: "/services", label: "Services" },
  { href: "/gallery", label: "Gallery" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
];

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 border-b border-blush-dark/60 bg-cream/90 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
        <Link
          href="/"
          className="font-display text-xl tracking-wide-plus text-rosewood uppercase"
        >
          Hair by Nyasia
        </Link>
        <nav className="hidden items-center gap-8 md:flex">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="text-xs uppercase tracking-wide-plus text-ink/70 transition hover:text-rosewood"
            >
              {link.label}
            </Link>
          ))}
        </nav>
        <Link
          href="/book"
          className="rounded-full bg-rosewood px-6 py-2.5 text-xs uppercase tracking-wide-plus text-cream transition hover:bg-rose-dark"
        >
          Book Now
        </Link>
      </div>
    </header>
  );
}
