import Link from 'next/link';
import { NAV } from '@/lib/site';
import { CommandPalette } from './command-palette';
import { MobileNav } from './mobile-nav';

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-30 border-b border-rule bg-paper/95 backdrop-blur-sm" style={{ height: 'var(--ci-header-h)' }}>
      <div className="mx-auto flex h-full max-w-[1400px] items-center gap-4 px-4 sm:px-6">
        <Link href="/" className="flex items-baseline gap-2 no-underline">
          <span className="font-display text-[20px] font-medium tracking-tight text-ink">CancerIndex</span>
          <span className="hidden text-[11px] uppercase tracking-[0.08em] text-ink-3 md:inline">the global index of cancer</span>
        </Link>
        <nav aria-label="Primary" className="ml-2 hidden flex-1 items-center gap-4 lg:flex">
          {NAV.map((n) => (
            <Link key={n.href} href={n.href} className="text-[13.5px] text-ink-2 no-underline hover:text-accent">
              {n.label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <CommandPalette />
          <MobileNav />
        </div>
      </div>
    </header>
  );
}