<header class="header" id="header">
  <div class="container header__inner">
    <a href="{{HOME}}" class="brand" aria-label="DGZOUP — página inicial">
      <img src="{{ROOT}}assets/generated/header-logo.png" alt="DGZOUP" width="1459" height="251">
    </a>

    <nav class="nav" id="nav">
      <a href="{{HOME}}" class="nav__mobile-brand" aria-label="DGZOUP — página inicial">
        <img src="{{ROOT}}assets/generated/header-logo.png" alt="DGZOUP" width="1459" height="251">
      </a>
      <ul class="nav__list">
        <li><a href="{{HOME}}" class="nav__link{{ACTIVE_HOME}}" data-nav-link>Home</a></li>
        <li class="nav__item--has-submenu">
          <div class="nav__item-row">
            <a href="{{HOME}}#services" class="nav__link{{ACTIVE_SERVICES}}" data-nav-link>Serviços</a>
            <button type="button" class="nav__submenu-toggle" aria-label="Mostrar produtos" aria-expanded="false">
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <ul class="nav__submenu">
            <li><a href="{{ROOT}}assets/catalogos/insertos-latao.pdf" class="nav__submenu-link nav__submenu-link--featured" download>Insertos de Latão</a></li>
            <li><a href="{{ROOT}}assets/catalogos/Acessorios_Moldes_DGZOUP.pdf" class="nav__submenu-link" download>Acessórios para Moldes</a></li>
            <li><a href="{{ROOT}}assets/catalogos/componentes-eletronica.pdf" class="nav__submenu-link" download>Componentes para Eletrónica</a></li>
            <li><a href="{{ROOT}}assets/catalogos/pecas-especiais.pdf" class="nav__submenu-link" download>Peças Especiais</a></li>
            <li><a href="{{HOME}}produtos/" class="nav__submenu-link">Ver Todos os Produtos →</a></li>
          </ul>
        </li>
        <li><a href="{{HOME}}#equipamentos" class="nav__link" data-nav-link>Equipamentos</a></li>
        <li><a href="{{HOME}}#porque-escolher" class="nav__link" data-nav-link>Qualidade</a></li>
        <li><a href="{{HOME}}contactos/" class="nav__link{{ACTIVE_CONTACTOS}}" data-nav-link>Contactos</a></li>
      </ul>
      <a href="https://www.linkedin.com/in/dgzoup-%E2%80%93-digital-solutions-lda-945517419/" target="_blank" rel="noopener" class="nav__mobile-social"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>LinkedIn</a>
    </nav>

    <div class="lang-switch" id="langSwitch">
      <button type="button" class="lang-switch__trigger" id="langSwitchTrigger" aria-expanded="false" aria-haspopup="true">
        <img class="lang-switch__flag" src="{{ROOT}}assets/icons/flag-pt.svg" alt="">
        <span class="lang-switch__current">PT</span>
        <svg class="lang-switch__chevron" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      <div class="lang-switch__menu" id="langSwitchMenu">
        <a href="{{HREF_PT}}" class="lang-switch__option is-active" hreflang="pt"><img class="lang-switch__option-flag" src="{{ROOT}}assets/icons/flag-pt.svg" alt="">Português</a>
        <a href="{{HREF_EN}}" class="lang-switch__option" hreflang="en"><img class="lang-switch__option-flag" src="{{ROOT}}assets/icons/flag-gb.svg" alt="">English</a>
      </div>
    </div>

    <a href="{{HOME}}contactos/" class="btn btn--gold header__cta">
      <span class="btn__label">
        <span class="btn__text">Solicitar Cotação</span>
        <span class="btn__text btn__text--hover" aria-hidden="true">Solicitar Cotação</span>
      </span>
      <span class="btn__icon-box">
        <img class="btn__icon" src="{{ROOT}}assets/icons/arrow.svg" alt="" width="16" height="12">
        <img class="btn__icon btn__icon--hover" src="{{ROOT}}assets/icons/arrow.svg" alt="" width="16" height="12">
      </span>
    </a>

    <button class="nav-toggle" id="navToggle" aria-label="Abrir menu" aria-expanded="false" aria-controls="nav">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>
<div class="nav-backdrop" id="navBackdrop"></div>
