import Link from "next/link";
import { Menu } from "lucide-react";
import { Logo } from "./logo";

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 border-b border-border/70 bg-cream/90 backdrop-blur-xl">
      <div className="mx-auto flex h-18 max-w-7xl items-center justify-between px-5 sm:px-8">
        <Logo />
        <nav className="hidden items-center gap-7 text-sm font-semibold md:flex" aria-label="Main navigation">
          <Link href="/listings" className="transition hover:text-ember">Stays</Link>
          <Link href="/#experiences" className="transition hover:text-ember">Experiences</Link>
          <Link href="/dashboard" className="transition hover:text-ember">Dashboard</Link>
        </nav>
        <div className="flex items-center gap-2">
          <Link href="/login" className="hidden rounded-xl px-4 py-2 text-sm font-semibold hover:bg-sand/60 sm:block">
            Log in
          </Link>
          <Link href="/signup" className="rounded-xl bg-cocoa px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-ink">
            Join Encostay
          </Link>
          <Link href="/listings" aria-label="Open navigation" className="grid size-10 place-items-center rounded-xl md:hidden">
            <Menu size={21} />
          </Link>
        </div>
      </div>
    </header>
  );
}