{# Navigation - Brand Kit v2.0 with i18n #}
<nav class="nav">
    <div class="nav__container">
        <a href="/" class="nav__logo">
            Saúl Morales <em>Pacheco</em>
        </a>
        <div class="nav__toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="nav__menu">
            <a href="#home" class="nav__link active">{{ 'nav.home'|trans }}</a>
            <a href="#about" class="nav__link">{{ 'nav.about'|trans }}</a>
            <a href="#skills" class="nav__link">{{ 'nav.skills'|trans }}</a>
            <a href="#experience" class="nav__link">{{ 'nav.experience'|trans }}</a>
            <a href="#projects" class="nav__link">{{ 'nav.projects'|trans }}</a>
            <a href="#contact" class="nav__link">{{ 'nav.contact'|trans }}</a>

            {# Language Toggle #}
            <div class="lang-toggle">
                {% if app.request.locale == 'es' %}
                    <a href="{{ path('change_locale', {locale: 'en'}) }}" class="lang-btn lang-btn--inactive">ES</a>
                    <span class="lang-separator">·</span>
                    <a href="{{ path('change_locale', {locale: 'en'}) }}" class="lang-btn lang-btn--active">EN</a>
                {% else %}
                    <a href="{{ path('change_locale', {locale: 'es'}) }}" class="lang-btn lang-btn--active">ES</a>
                    <span class="lang-separator">·</span>
                    <a href="{{ path('change_locale', {locale: 'en'}) }}" class="lang-btn lang-btn--inactive">EN</a>
                {% endif %}
            </div>
        </nav>
    </div>
</nav>