// Top navigation bar
function Nav({ onBook }) {
  const linkStyle = {
    fontSize: 14,
    color: 'var(--ink-2)',
    fontWeight: 500,
  };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: 'color-mix(in oklab, var(--bg) 92%, transparent)',
      backdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--line-2)'
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '18px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 28, height: 28, borderRadius: 6,
            background: 'var(--ink)', color: 'var(--paper)',
            display: 'grid', placeItems: 'center',
            fontFamily: "'Instrument Serif', serif", fontSize: 20, lineHeight: 1, paddingBottom: 2,
          }}>N</span>
          <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, letterSpacing: '-0.01em' }}>
            Numberline
          </span>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href="#about" style={linkStyle}>About</a>
          <a href="#services" style={linkStyle}>Services</a>
          <a href="#resources" style={linkStyle}>Modern Finance Stack</a>
          <button onClick={onBook} style={{
            background: 'var(--ink)', color: 'var(--paper)',
            border: 'none', borderRadius: 999,
            padding: '9px 18px', fontSize: 14, fontWeight: 500,
          }}>
            Book a 30-min intro →
          </button>
        </nav>
      </div>
    </header>
  );
}

window.Nav = Nav;