// Header.jsx — sticky top nav with the wordmark and route links
function Header({ route, onNavigate, theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navItem = (id) => (
    <button
      className="kd-nav-link"
      data-active={route === id}
      onClick={() => onNavigate(id)}
      style={{
        background: 'none', border: 'none',
        fontFamily: 'var(--mono)', fontSize: 11,
        letterSpacing: '0.2em',
        textTransform: 'uppercase',
        color: route === id ? 'var(--ink)' : 'var(--slate)',
        cursor: 'pointer', padding: '6px 4px',
        transition: 'color 150ms ease-out',
      }}
    >
      {window.UI.nav[id]}
    </button>
  );

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'var(--bone)',
      borderBottom: scrolled ? '1px solid var(--hairline)' : '1px solid transparent',
      transition: 'border-color 150ms ease-out',
      height: 'var(--header-h)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 40px',
    }}>
      <button onClick={() => onNavigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }} aria-label="Home">
        <Wordmark size={26} variant="solid" />
      </button>
      <nav style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
        {navItem('home')}
        {navItem('issue')}
        {navItem('archive')}
        {navItem('concepts')}
        {navItem('about')}
        <button
          className="kd-theme-toggle"
          onClick={onToggleTheme}
          aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
          title={theme === 'dark' ? 'Light mode' : 'Dark mode'}
        >
          {theme === 'dark' ? (
            // sun
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
              <circle cx="12" cy="12" r="4.2" />
              <path d="M12 2.5v2.4M12 19.1v2.4M4.2 4.2l1.7 1.7M18.1 18.1l1.7 1.7M2.5 12h2.4M19.1 12h2.4M4.2 19.8l1.7-1.7M18.1 5.9l1.7-1.7" />
            </svg>
          ) : (
            // moon
            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 14.2A8 8 0 1 1 9.8 4a6.5 6.5 0 0 0 10.2 10.2z" />
            </svg>
          )}
        </button>
        <button
          className="kd-btn"
          onClick={() => onNavigate('home')}
          style={{
            fontFamily: 'var(--mono)', fontSize: 10,
            letterSpacing: '0.2em',
            textTransform: 'uppercase',
            padding: '9px 16px', background: 'var(--ink)', color: 'var(--bone)',
            border: 'none', borderRadius: 2, cursor: 'pointer',
          }}>{window.UI.subscribe}</button>
      </nav>
    </header>
  );
}
window.Header = Header;