function TopNav() {
  return (
    <nav style={{
      width: 1320, margin: '0 auto',
      padding: '22px 56px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      position: 'relative', zIndex: 30,
    }}>
      <a href="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <span style={{
          width: 9, height: 9, borderRadius: '50%',
          background: 'var(--bl-brand)',
          boxShadow: '0 0 0 4px rgba(13,158,140,0.15)',
        }}/>
        <span style={{
          fontWeight: 700, letterSpacing: '0.14em', fontSize: 13,
          color: '#fff', fontFamily: 'var(--bl-font)',
        }}>BORDERLENS</span>
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="https://app.borderlens.io" style={{ fontSize: 13, color: 'var(--bl-text-2)', fontWeight: 500 }}>Sign in</a>
        <a href="mailto:hello@borderlens.io?subject=BorderLens%20demo" style={{
          fontSize: 13, fontWeight: 600,
          color: '#042f2e', background: 'var(--bl-brand)',
          padding: '9px 18px', borderRadius: 8,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          whiteSpace: 'nowrap',
        }}>Book a demo</a>
      </div>
    </nav>
  );
}

window.TopNav = TopNav;