'use client';
import { Search } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Wordmark } from '@/components/brand/logo';
import { cn } from '@/lib/cn';
import { primaryNav, routes } from '@/lib/site';
import { DensityToggle } from './density';
import { useOpenSearch } from './search-context';
import { ThemeToggle } from './theme';

/** Header: lockup · Home Live Companies Events Rankings Industries Countries · ⌘K search · theme · density. */
export function SiteHeader() {
  const pathname = usePathname();
  const openSearch = useOpenSearch();
  const isActive = (href: string) => (href === '/' ? pathname === '/' : pathname === href || pathname.startsWith(href + '/'));
  return (
    <header className="sticky top-0 z-40 border-b border-rule bg-canvas/85 backdrop-blur-md">
      <div className="container-x mx-auto flex h-[var(--header-h)] max-w-[1600px] items-center gap-3">
        <Link href={routes.home()} className="flex h-11 items-center" aria-label="Company Atlas home">
          <Wordmark />
        </Link>
        <nav aria-label="Primary" className="ml-3 hidden items-center gap-0.5 lg:flex">
          {primaryNav.map((n) => (
            <Link key={n.href} href={n.href} aria-current={isActive(n.href) ? 'page' : undefined} className={cn('flex h-9 items-center gap-1.5 rounded-sm px-2.5 text-[13.5px] transition-colors', isActive(n.href) ? 'font-medium text-ink' : 'text-ink-2 hover:text-ink')}>
              {n.href === '/live' && <span className="dot" aria-hidden />}
              {n.label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-1">
          <button type="button" onClick={openSearch} className="hidden h-9 min-w-[250px] items-center gap-2 rounded-sm border border-rule bg-surface px-3 text-sm text-ink-3 hover:border-rule-strong hover:text-ink-2 md:flex" aria-label="Open search" data-open-palette>
            <Search className="size-4" aria-hidden />
            <span className="flex-1 text-left">Search or ask…</span>
            <kbd className="mono rounded-[3px] border border-rule px-1.5 py-0.5 text-[10px]">⌘K</kbd>
          </button>
          <button type="button" onClick={openSearch} className="flex size-11 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink md:hidden" aria-label="Open search">
            <Search className="size-5" aria-hidden />
          </button>
          <ThemeToggle />
          <DensityToggle />
        </div>
      </div>
    </header>
  );
}