// Top navigation
const SBNav = () => (
  <header className="sb-nav">
    <div className="shell sb-nav-inner">
      <a href="#" className="sb-mark" aria-label="SheBytes — voltar ao topo">
        <img
          className="sb-mark-img"
          src="uploads/LOGOTIPO-SHE-BYTES-ME-branco-fundo-transparente-24-24-scaled-9fff4641.png"
          alt="SheBytes"
          width="170"
          height="40"
        />
      </a>

      <nav className="sb-nav-links" aria-label="principal">
        <a href="#servicos">Serviços</a>
        <a href="#casos">Casos</a>
        <a href="#clientes">Clientes</a>
        <a href="#planos">Planos</a>
        <a href="#contato">Contato</a>
      </nav>

      <div className="sb-nav-right">
        <div className="sb-lang mono">
          <span className="on">PT</span>
          <span>EN</span>
          <span>ES</span>
        </div>
        <a className="btn btn-whats btn-mini" href="#contato">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.38 5.07L2 22l5.07-1.34A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm5.27 14.21c-.22.62-1.27 1.17-1.78 1.21-.46.04-.99.21-3.37-.7-2.83-1.09-4.65-3.91-4.79-4.1-.14-.18-1.14-1.51-1.14-2.88 0-1.37.72-2.04.97-2.32.26-.28.56-.35.75-.35.18 0 .37 0 .53.01.18.01.42-.07.66.5.25.59.83 2.04.91 2.19.07.15.12.32.02.51-.1.18-.15.3-.3.46-.15.16-.31.36-.45.49-.15.13-.3.28-.13.55.17.27.77 1.26 1.65 2.05 1.14 1.02 2.09 1.33 2.36 1.48.27.15.43.13.59-.07.16-.2.68-.79.86-1.06.18-.27.36-.22.61-.13.25.09 1.59.75 1.86.88.27.13.45.2.52.31.07.11.07.64-.15 1.26z"/>
          </svg>
          WhatsApp
        </a>
      </div>
    </div>
  </header>
);

window.SBNav = SBNav;