// Header.jsx — terminal window chrome + prompt nav
const Header = ({ cartCount, route, setRoute, openCart, user, onLogin, onAccount }) => {
  const navItems = [
    { id: 'home',   label: 'home',   path: '~/' },
    { id: 'shop',   label: 'shop',   path: '~/shop' },
    { id: 'guide',  label: 'guide',  path: '~/brew-guide' },
    { id: 'manifesto', label: 'manifesto', path: '~/manifesto' },
  ];
  return (
    <header style={{ borderBottom: '1px solid rgba(255,255,255,0.22)', background: '#000', position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50 }}>
      {/* tmux/iTerm chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 18px', borderBottom: '1px solid rgba(255,255,255,0.14)', background: '#0A0A0A' }}>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#FF3344' }}></span>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#FFD23F' }}></span>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#00FF41' }}></span>
        <span style={{ marginLeft: 16, fontSize: 13, color: '#BFBFBF', letterSpacing: '0.1em' }}>
          operator@brew-co — -zsh — 142×40
        </span>
        <span style={{ marginLeft: 'auto', fontSize: 12, color: '#BFBFBF', letterSpacing: '0.18em' }}>UPTIME: 99.97% · NODES: 10,000</span>
      </div>
      {/* prompt nav */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 28, padding: '18px 28px' }}>
        <div onClick={() => setRoute('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, border: '1px solid #00FF41', display: 'grid', placeItems: 'center', color: '#00FF41', fontWeight: 800, fontSize: 20 }}>#</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontSize: 18, fontWeight: 800, letterSpacing: '0.16em', color: '#FFFFFF' }}>OPERATOR</span>
            <span style={{ fontSize: 10, letterSpacing: '0.4em', color: '#CCCCCC', marginTop: 2 }}>B R E W I N G&nbsp;&nbsp;C O.</span>
          </div>
        </div>
        <nav style={{ display: 'flex', gap: 22, marginLeft: 36 }}>
          {navItems.map((n) => (
            <a key={n.id} onClick={() => setRoute(n.id)} style={{ cursor: 'pointer', fontSize: 14, letterSpacing: '0.15em', color: route === n.id ? '#00FF41' : '#DDDDDD', textTransform: 'uppercase' }}>
              <span style={{ color: '#00FF41' }}>{'>'} </span>{n.label}
            </a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 12, alignItems: 'center' }}>
          {user ? (
            <button onClick={onAccount} style={{
              background: route === 'account' ? '#00FF41' : 'transparent',
              color: route === 'account' ? '#000' : '#00FF41',
              border: '1px solid #00FF41', padding: '8px 14px', fontFamily: 'inherit',
              fontSize: 12, letterSpacing: '0.18em', cursor: 'pointer', borderRadius: 2, fontWeight: 700,
            }}>
              [ @{user.handle} ]
            </button>
          ) : (
            <button onClick={onLogin} style={{
              background: 'transparent', border: '1px solid rgba(255,255,255,0.32)',
              color: '#DDDDDD', padding: '8px 14px', fontFamily: 'inherit',
              fontSize: 12, letterSpacing: '0.18em', cursor: 'pointer', borderRadius: 2, fontWeight: 700,
            }}>
              {'>'} ./login
            </button>
          )}
          <button onClick={openCart} style={{ background: 'transparent', border: '1px solid #00FF41', color: '#00FF41', padding: '10px 16px', fontFamily: 'inherit', fontSize: 13, letterSpacing: '0.18em', cursor: 'pointer', borderRadius: 2, fontWeight: 700 }}>
            [ CART : {String(cartCount).padStart(2, '0')} ]
          </button>
        </div>
      </div>
    </header>
  );
};

window.Header = Header;