// Editorial top bar. Mark + nav + ink CTA. Sticky.

function Header({ current, onNav }) {
  const wrap = {
    position: 'sticky', top: 0, zIndex: 50,
    height: 64,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 clamp(20px, 4vw, 48px)',
    background: 'rgba(246,244,240,0.92)',
    backdropFilter: 'saturate(140%)',
    borderBottom: '1px solid var(--bc-border-subtle)',
  };
  const link = (active) => ({
    fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', fontWeight: 500,
    color: active ? 'var(--bc-fg-primary)' : 'var(--bc-fg-secondary)',
    cursor: 'pointer', padding: '6px 0',
    borderBottom: active ? '1px solid var(--bc-ink)' : '1px solid transparent',
    transition: 'color 160ms cubic-bezier(.32,.72,0,1)',
  });
  const cta = {
    fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    padding: '11px 18px',
    whiteSpace: 'nowrap',
    background: 'var(--bc-ink)', color: 'var(--bc-paper)',
    border: '1px solid var(--bc-ink)', cursor: 'pointer',
    transition: 'background 160ms cubic-bezier(.32,.72,0,1)',
  };

  const items = [
    ['home', 'Home'], ['work', 'Work'], ['about', 'About'],
    ['careers', 'Careers'], ['contact', 'Contact'],
  ];

  return (
    <header style={wrap} data-screen-label="00 Header">
      <a onClick={() => onNav('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
        <img src="assets/logo-mark.svg" alt="" style={{ width: 26, height: 26 }} />
        <span style={{ fontFamily: 'var(--bc-font-sans)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.015em' }}>
          BuildCraft<span style={{ fontFamily: 'var(--bc-font-mono)', fontWeight: 500, fontSize: 10, letterSpacing: '0.2em', color: 'var(--bc-selvedge)', marginLeft: 8, verticalAlign: 'middle' }}>LABS</span>
        </span>
      </a>
      <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {items.map(([id, label]) => (
          <a key={id} style={link(current === id)}
             onClick={() => onNav(id)}
             onMouseOver={e => { if (current !== id) e.currentTarget.style.color = 'var(--bc-fg-primary)'; }}
             onMouseOut={e => { if (current !== id) e.currentTarget.style.color = 'var(--bc-fg-secondary)'; }}>
            {label}
          </a>
        ))}
        <button style={cta}
                onClick={() => onNav('contact')}
                onMouseOver={e => e.currentTarget.style.background = '#36363A'}
                onMouseOut={e => e.currentTarget.style.background = 'var(--bc-ink)'}>
          Write to us
        </button>
      </nav>
    </header>
  );
}

window.Header = Header;