/* Surgr Landing — Sticky Navbar */
function Navbar() {
  return (
    <nav style={{
      position: 'sticky', top: 0, left: 0, width: '100%', zIndex: 50,
      background: 'rgba(2,2,2,0.92)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{
        maxWidth: 1280,
        margin: '0 auto',
        padding: '0 24px',
        height: 72,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="../../assets/icon-512.png" alt="Surgr" width="36" height="36" style={{ borderRadius: 10 }}/>
          <span style={{
            fontFamily: 'var(--surgr-font-heading)',
            fontWeight: 800, fontSize: 22, letterSpacing: 2, color: '#FFF',
          }}>SURGR</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <a href="#" style={{
            fontFamily: 'var(--surgr-font-body)', fontWeight: 600, fontSize: 15,
            color: '#8F8F9A', textDecoration: 'none',
          }}>Entrar</a>
          <a href="#" style={{
            display: 'inline-block',
            background: '#C8FF00', color: '#000',
            fontFamily: 'var(--surgr-font-body)',
            fontWeight: 800, fontSize: 14, letterSpacing: 1,
            textTransform: 'uppercase',
            padding: '12px 24px',
            borderRadius: 12,
            boxShadow: '0 4px 20px rgba(200,255,0,0.15)',
            textDecoration: 'none',
          }}>Inicie Agora</a>
        </div>
      </div>
    </nav>
  );
}

window.SurgrLandingKit.Navbar = Navbar;