import Link from 'next/link';
import { NAV } from '@/lib/site';
import { CommandPalette } from './command-palette';
import { MobileNav } from './mobile-nav';
import { ThemeToggle } from './theme-toggle';
import { BrandMark } from './brand-mark';

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-center gap-2.5 no-underline" aria-label="CancerIndex home">
          <BrandMark size={26} className="shrink-0 text-ink" />
          <span className="font-display text-[20px] font-medium tracking-tight text-ink">
            Cancer<span className="text-accent">Index</span>
          </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 />
          <ThemeToggle />
          <MobileNav />
        </div>
      </div>
    </header>
  );
}