/* Reiderstad Invest — site header */
function Nav({ view, setView, onBook }) {
  const { Button } = window.ReiderstadInvestDesignSystem_6b0242;
  const links = [
    ['home', 'Home'],
    ['services', 'Services'],
    ['property', 'A property'],
    ['about', 'About'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'color-mix(in oklab, var(--bg) 88%, transparent)',
      backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--hairline)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 96px', height: 76,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={() => setView('home')} style={{
          display: 'flex', alignItems: 'center', gap: 14, background: 'none',
          border: 'none', cursor: 'pointer', padding: 0,
        }}>
          <img src={window.LOGO_LIGHT} alt="" style={{ height: 38 }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'var(--fg)' }}>Reiderstad Invest</span>
        </button>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {links.map(([id, label]) => (
            <button key={id} onClick={() => setView(id)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
              fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
              letterSpacing: '0.02em',
              color: view === id ? 'var(--fg)' : 'var(--muted)',
              borderBottom: view === id ? '1px solid var(--accent)' : '1px solid transparent',
              transition: 'color 180ms ease',
            }}>{label}</button>
          ))}
          <Button variant="primary" size="sm" onClick={onBook}>Book a scoping call</Button>
        </nav>
      </div>
    </header>
  );
}
window.Nav = Nav;