{# Site Header #}
{% if menu_pages|length > 1 %}
<header class="site-header">
    <div class="site-header__container">
        {# Left: Burger menu #}
        <div class="site-header__left">
            <button class="burger-menu__toggle"
                    aria-label="{{ app.request.locale == 'fr' ? 'Ouvrir le menu' : 'Open menu' }}"
                    aria-expanded="false"
                    aria-controls="burger-menu"
                    data-burger-toggle>
                <span class="burger-menu__icon"></span>
                <span class="burger-menu__label">MENU</span>
            </button>
        </div>

        {# Center: Logo #}
        <div class="site-header__center">
            <a href="{{ path(app.request.locale == 'en' ? 'home_en' : 'home') }}" class="site-header__logo">
                <img src="{{ asset('build/images/coming-soon/logo-galta.svg') }}" alt="Galta Architecte" class="site-header__logo-image">
            </a>
        </div>

        {# Right: Actions #}
        <div class="site-header__right">
            {# Language switcher #}
            <div class="site-header__lang">
                {% set currentRoute = app.request.attributes.get('_route') %}
                {% set routeParams = switch_locale_params(app.request.attributes.get('_route_params')) %}

                {% if app.request.locale == 'fr' %}
                    <button class="site-header__lang-btn" aria-label="Changer la langue">
                        <span>FR</span>
                        {% include 'components/_icon.html.twig' with {name: 'chevron-down', width: '12px', height: '8px'} only %}
                    </button>
                    <div class="site-header__lang-dropdown">
                        <a href="{{ path(currentRoute ~ '_en', routeParams) }}" class="site-header__lang-option">EN</a>
                    </div>
                {% else %}
                    <button class="site-header__lang-btn" aria-label="Change language">
                        <span>EN</span>
                        {% include 'components/_icon.html.twig' with {name: 'chevron-down', width: '12px', height: '8px'} only %}
                    </button>
                    <div class="site-header__lang-dropdown">
                        <a href="{{ path(currentRoute|replace({'_en': ''}), routeParams) }}" class="site-header__lang-option">FR</a>
                    </div>
                {% endif %}
            </div>

            {# Theme toggle #}
            {{ include('components/_theme_toggle.html.twig', {variant: 'header'}) }}

            {# Contact button (hidden if the "contact" CMS page is unpublished) #}
            {% if contact_page_published %}
                {% set header_cta_content %}{{ app.request.locale == 'fr' ? 'Contactez-nous' : 'Contact us' }}{% endset %}
                {{ include('components/_button.html.twig', {
                    href: path(app.request.locale == 'en' ? 'page_show_en' : 'page_show', {slug: 'contact'}),
                    content: header_cta_content,
                    variant: 'lined',
                    extra_class: 'link-btn--on-light link-btn--compact site-header__cta',
                }) }}
            {% endif %}

            {# Audio toggle — ambient soundtrack, state persisted in localStorage #}
            {% set audio_label_on = app.request.locale == 'fr' ? 'Désactiver la musique' : 'Turn music off' %}
            {% set audio_label_off = app.request.locale == 'fr' ? 'Activer la musique' : 'Turn music on' %}
            <button type="button"
                    class="site-header__icon-btn site-header__audio-btn"
                    data-audio-toggle
                    data-audio-src="{{ asset('build/music/ambient.mp3') }}"
                    data-label-on="{{ audio_label_on }}"
                    data-label-off="{{ audio_label_off }}"
                    aria-pressed="false"
                    aria-label="{{ audio_label_off }}"
                    title="{{ audio_label_off }}">
                {% include 'components/_audio-icon.html.twig' with {class: 'site-header__audio-icon'} only %}
            </button>
        </div>
    </div>
</header>
{% endif %}