{# TCA Industries — site header (dark anthracite per Figma). Sticky on scroll,
   integrated visually with the hero. Logo RESERVE blanche, nav with "Nos
   Services" hover/focus-within dropdown, outlined phone CTA + gold Contact
   button. Mobile : burger + dark drawer. #}
{% set _route = app.request.attributes.get('_route', '') %}
{% set phoneRaw = siteParams.phone|default('04 73 28 74 74') %}
{% set phoneDigits = phoneRaw|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}

{% set services = [
    {slug: 'reparation-moteur-electrique', label: 'Réparation moteur électrique', route: 'app_service_reparation_moteur_electrique'},
    {slug: 'bobinage-moteur-electrique',   label: 'Bobinage moteur électrique',   route: 'app_service_bobinage_moteur_electrique'},
    {slug: 'reducteurs-motoreducteurs',    label: 'Réducteurs et motoréducteurs', route: 'app_service_reducteurs_motoreducteurs'},
    {slug: 'pompes-industrielles',         label: 'Pompes industrielles',         route: 'app_service_pompes_industrielles'},
    {slug: 'pompe-piscine-relevage',       label: 'Pompes piscine et relevage',   route: 'app_service_pompe_piscine_relevage'},
    {slug: 'reparation-pompe-immergee',    label: 'Réparation pompe immergée',    route: 'app_service_reparation_pompe_immergee'},
    {slug: 'variateurs-de-vitesse',        label: 'Variateurs de vitesse',        route: 'app_service_variateurs_de_vitesse'},
    {slug: 'transmissions-mecaniques',     label: 'Transmissions mécaniques',     route: 'app_service_transmissions_mecaniques'},
    {slug: 'maintenance-industrielle',     label: 'Maintenance industrielle',     route: 'app_service_maintenance_industrielle'},
    {slug: 'fournitures-industrielles',    label: 'Fournitures industrielles',    route: 'app_service_fournitures_industrielles'}
] %}

<header class="tca tca-header" role="banner">
    <div class="tca-container tca-header__inner">

        <a href="{{ path('app_home') }}" class="tca-header__logo" aria-label="{{ siteParams.siteName|default('TCA Industries') }} — Accueil">
            {# Logo header = RESERVE blanche (fond dark). Voir docs/design.md §4.3. #}
            {# Ratio aligné sur le viewBox du SVG (817.64 × 476.18) : les anciennes
               valeurs 220×56 réservaient une boîte au mauvais format et décalaient
               la mise en page au chargement (CLS). #}
            <img src="{{ asset('logos/HORIZONTALE BASELINE/LOGO-TCA-RVB_HORIZONTALE-BASELINE-RESERVE.svg') }}"
                 alt="{{ siteParams.siteName|default('TCA Industries') }}"
                 width="197" height="115">
        </a>

        <nav class="tca-header__nav" aria-label="Navigation principale">
            <a href="{{ path('app_home') }}" {% if _route == 'app_home' %}class="is-active" aria-current="page"{% endif %}>Accueil</a>

            <div class="tca-dropdown">
                <a href="{{ path('app_service_reparation_moteur_electrique') }}"
                   class="tca-dropdown__trigger{% if _route starts with 'app_service_' %} is-active{% endif %}"
                   aria-haspopup="true">
                    Nos Services
                </a>
                <div class="tca-dropdown__menu" role="menu">
                    {% for s in services %}
                        <a href="{{ path(s.route) }}" role="menuitem">{{ s.label }}</a>
                    {% endfor %}
                </div>
            </div>

            <a href="{{ path('app_about') }}" {% if _route == 'app_about' %}class="is-active" aria-current="page"{% endif %}>À propos</a>
            <a href="{{ path('app_blog_index') }}" {% if _route in ['app_blog_index', 'app_blog_article'] %}class="is-active"{% endif %}>Blog</a>
        </nav>

        <div class="tca-header__cta">
            {% if phoneDigits %}
                <a href="tel:+33{{ phoneDigits|slice(1) }}" class="tca-header__phone" aria-label="Appeler {{ siteParams.siteName|default('TCA Industries') }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    <span>{{ phoneRaw }}</span>
                </a>
            {% endif %}
            <a href="{{ path('app_contact') }}" class="tca-header__contact">Contact</a>
        </div>

        <button class="tca-burger" id="tca-burger" aria-label="Ouvrir le menu" aria-expanded="false" aria-controls="tca-mobile-nav">
            <span></span><span></span><span></span>
        </button>

    </div>

    <div class="tca-mobile-nav" id="tca-mobile-nav" aria-hidden="true">
        <ul>
            <li><a href="{{ path('app_home') }}" {% if _route == 'app_home' %}class="is-active"{% endif %}>Accueil</a></li>
            {% for s in services %}
                <li><a href="{{ path(s.route) }}" {% if app.request.attributes.get('slug', '') == s.slug %}class="is-active"{% endif %}>{{ s.label }}</a></li>
            {% endfor %}
            <li><a href="{{ path('app_about') }}" {% if _route == 'app_about' %}class="is-active"{% endif %}>À propos</a></li>
            <li><a href="{{ path('app_blog_index') }}" {% if _route in ['app_blog_index', 'app_blog_article'] %}class="is-active"{% endif %}>Blog</a></li>
            <li><a href="{{ path('app_contact') }}" {% if _route == 'app_contact' %}class="is-active"{% endif %}>Contact</a></li>
        </ul>
        <div class="tca-mobile-nav__cta">
            {% if phoneDigits %}
                <a href="tel:+33{{ phoneDigits|slice(1) }}" class="tca-btn tca-btn--gold tca-btn--block">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    Appeler le {{ phoneRaw }}
                </a>
            {% endif %}
        </div>
    </div>
</header>

<script>
(function() {
    var burger = document.getElementById('tca-burger');
    var drawer = document.getElementById('tca-mobile-nav');
    if (!burger || !drawer) return;

    // Le drawer s'ouvre sous le header : on aligne son bord haut sur la hauteur
    // réellement mesurée, qui dépend du logo. Une valeur figée en CSS finissait
    // par recouvrir le haut du header dès que la hauteur du header changeait.
    var header = burger.closest('.tca-header');
    function syncDrawerTop() {
        if (header) drawer.style.top = header.getBoundingClientRect().height + 'px';
    }
    syncDrawerTop();
    window.addEventListener('resize', syncDrawerTop);
    window.addEventListener('load', syncDrawerTop);

    burger.addEventListener('click', function() {
        syncDrawerTop();
        var open = drawer.classList.toggle('is-open');
        burger.setAttribute('aria-expanded', open ? 'true' : 'false');
        burger.setAttribute('aria-label', open ? 'Fermer le menu' : 'Ouvrir le menu');
        drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
        document.body.style.overflow = open ? 'hidden' : '';
        document.body.classList.toggle('tca-nav-open', open);
    });
})();
</script>