import Link from 'next/link';
import { Logo } from '@/components/brand/Logo';
import { ButtonLink } from '@/components/ui/Button';
import { mainNav } from '@/lib/site';
import { SiteNav } from './SiteNav';

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 border-b border-line/70">
      {/* The frosted backdrop lives on its own layer: backdrop-filter on <header> itself would become the
          containing block for the fixed mobile menu and collapse it to the header's height. */}
      <div aria-hidden="true" className="glass absolute inset-0 -z-10" />
      <div className="container-page flex h-16 items-center justify-between gap-4 lg:h-[4.5rem]">
        <Link href="/" className="-m-1 rounded-lg p-1" aria-label="PintRush home">
          <Logo size="md" />
        </Link>
        <div className="flex items-center gap-2 lg:gap-6">
          <SiteNav items={mainNav} />
          <ButtonLink href="/pilot" size="sm" className="max-sm:hidden">
            Join the pilot
          </ButtonLink>
        </div>
      </div>
    </header>
  );
}