{% set nav_groups = {
    'Créer': [
        { label: 'Création de site', url: '/creation-site-internet-guadeloupe/', desc: 'Sites vitrines et e-commerce' },
        { label: 'Application mobile', url: '/creation-application-mobile-guadeloupe/', desc: 'PWA et cross-platform' },
        { label: 'Infographie', url: '/infographie-en-guadeloupe/', desc: 'Identité visuelle et supports' },
        { label: 'Photographie', url: '/photographe-professionnel-guadeloupe/', desc: 'Photographie professionnelle' },
    ],
    'Gérer': [
        { label: 'Hébergement & domaine', url: '/hebergement-et-nom-de-domaine-guadeloupe/', desc: 'Hébergement et noms de domaine' },
        { label: 'Référencement SEO', url: '/referencement-seo-guadeloupe/', desc: 'Visibilité sur Google' },
        { label: 'Référencement local', url: '/referencement-local-guadeloupe/', desc: 'Fiche Google Business' },
        { label: 'Google Ads', url: '/referencement-google-adwords-guadeloupe/', desc: 'Campagnes publicitaires' },
    ],
    'Gagner du temps': [
        { label: 'Automatisation IA', url: '/automatisation-ia-guadeloupe/', desc: 'Automatisations métier' },
        { label: 'Chatbot IA', url: '/creation-chatbot-ia-guadeloupe/', desc: 'Assistants conversationnels' },
    ],
} %}

<header class="site-header">
    <div class="container site-header__inner">
        <a class="brand" href="/" aria-label="SALAM — accueil">
            <img src="/images/symbole-salam-140.webp" alt="" width="34" height="34">
            <span class="brand__name">SALAM</span>
        </a>

        <nav class="nav" aria-label="Navigation principale">
            {% for group, items in nav_groups %}
                <div class="nav__item">
                    <button class="nav__link" aria-haspopup="true" aria-expanded="false">
                        {{ group }}
                        <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
                    </button>
                    <div class="megamenu" role="menu">
                        {% for item in items %}
                            <a class="megamenu__link" role="menuitem" href="{{ item.url }}">
                                <span class="megamenu__title">{{ item.label }}</span>
                                <span class="megamenu__desc">{{ item.desc }}</span>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
            <div class="nav__item">
                <a class="nav__link" href="/financement-numerique-guadeloupe/">
                    Chèque TIC <span class="pill pill--accent">Gratuit</span>
                </a>
            </div>
            <div class="nav__item"><a class="nav__link" href="/nos-realisations/">Réalisations</a></div>
            <div class="nav__item"><a class="nav__link" href="/blog/">Blog</a></div>
        </nav>

        <div class="header__actions">
            <a class="btn btn--primary" href="/demande-de-devis/">Devis gratuit</a>
            <button class="burger" aria-label="Ouvrir le menu" aria-controls="mobile-menu" aria-expanded="false">
                <span></span><span></span><span></span>
            </button>
        </div>
    </div>
</header>