function Header() {
  return (
    <header style={{
      position: 'absolute', top: 24, left: 24, right: 24, zIndex: 10,
      padding: '14px 22px', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', gap: 32, color: '#fff',
      background: 'rgba(10,19,48,0.22)',
      backdropFilter: 'saturate(140%) blur(14px)',
      WebkitBackdropFilter: 'saturate(140%) blur(14px)',
      border: '1px solid rgba(255,255,255,0.18)',
      borderRadius: 999
    }}>
      <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0, paddingLeft: 6 }}>
        <img src="../../assets/semog-logo.svg" alt="Semog" style={{ height: 26, filter: 'brightness(0) invert(1)' }} />
      </a>
      <nav style={{ display: 'flex', gap: 28, alignItems: 'center', fontFamily: 'Inter', fontSize: 14, fontWeight: 500, letterSpacing: '0.01em' }}>
        {['Para você', 'Para síndicos', 'Soluções', 'Sobre', 'Contato'].map((l) => (
          <a key={l} href="#" style={{ color: '#fff', textDecoration: 'none', opacity: 0.92, whiteSpace: 'nowrap' }}>{l}</a>
        ))}
      </nav>
      <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
        <a href="#" style={{
          fontFamily: 'Inter', fontSize: 13, fontWeight: 500, color: '#fff',
          padding: '10px 18px', borderRadius: 999, textDecoration: 'none', opacity: 0.92
        }}>Entrar</a>
        <a href="#" style={{
          fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: '#0A1330',
          background: '#fff', padding: '10px 18px', borderRadius: 999, textDecoration: 'none'
        }}>Peça uma proposta</a>
      </div>
    </header>
  );
}
window.SemogHeader = Header;