{#
 # ============================================================================
 # ORGANISM: LANDING HEADER — Floating Pill Nav
 # ============================================================================
 #
 # Header de navigation flottant (pill) pour les landing pages.
 # Logo mixte (sans-serif + serif italic), active pill, mega menu outils, CTA.
 # Fully parameterized: all labels, nav items and categories via Twig parameters.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/logo/logo-with-text.html.twig
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre        | Type   | Defaut               | Description                       |
 # |------------------|--------|----------------------|-----------------------------------|
 # | loginUrl         | string | '#'                  | Login URL                         |
 # | loginLabel       | string | 'Connexion'          | Login link text                   |
 # | activeCode       | string | null                 | Active tool code (e.g. 'moodia')  |
 # | activeLabel      | string | null                 | Active section label              |
 # | allTools         | array  | []                   | DB tool entities for color override|
 # | toolsLabel       | string | 'Outils'             | Mega menu trigger label           |
 # | navItems         | array  | (default LMS/Tarifs/FAQ) | [{label, href}]               |
 # | categories       | array  | (default 3 categories)   | [{title, description, icon, color}] |
 # | toolDefs         | array  | (default 6 tools)    | [{code, route, name, tagline, icon, color}] |
 # | footerLabel      | string | 'Explorer tous les outils' | Mega menu footer link text   |
 # | mobileToolsLabel | string | 'Outils'             | Mobile menu tools section label   |
 # | class            | string | ''                   | Additional CSS classes            |
 #
 # ============================================================================
 #}

{% set loginUrl    = loginUrl    ?? '#' %}
{% set loginLabel  = loginLabel  ?? 'Connexion' %}
{% set activeCode  = activeCode  ?? null %}
{% set activeLabel = activeLabel ?? null %}
{% set toolsLabel  = toolsLabel  ?? 'Outils' %}
{% set mobileToolsLabel = mobileToolsLabel ?? 'Outils' %}
{% set footerLabel = footerLabel ?? 'Explorer tous les outils' %}
{% set class       = class       ?? '' %}

{% set defaultNavItems = [
    { label: 'Tarifs', href: path('app_landing') ~ '#tarifs' },
    { label: 'F.A.Q', href: path('app_landing') ~ '#faq' }
] %}
{% set navItems = navItems ?? defaultNavItems %}

{% set defaultCategories = [
    { title: 'Pour les Formateurs',    description: 'Créez cours, diaporamas, podcasts et infographies en quelques minutes.',    icon: 'book',     color: '#0C81E4' },
    { title: 'Pour les Établissements',description: 'Déploiement LMS, hébergement et maintenance inclus.',                        icon: 'buildings',color: '#7C3AED' },
    { title: 'Pour les Responsables',  description: 'Dashboard de suivi, gestion des cohortes et analytics.',                     icon: 'chart',    color: '#06B6D4' }
] %}
{% set categories = categories ?? defaultCategories %}

{# Index des tools DB par code pour override des couleurs #}
{% set dbToolsMap = {} %}
{% for dbTool in (allTools ?? []) %}
    {% set dbToolsMap = dbToolsMap|merge({(dbTool.code): dbTool}) %}
{% endfor %}

{# Données statiques outils (taglines, routes) — couleurs overridées depuis DB si dispo #}
{% set defaultToolDefs = [
    { code: 'moodia',    route: 'app_landing_moodia',    name: 'Moodia',    tagline: 'Transformez vos PDF en cours LMS',      icon: 'bubul-moodia',    color: '#0C81E4' },
    { code: 'scormia',   route: 'app_landing_scormia',   name: 'Scormia',   tagline: 'Créez des modules SCORM interactifs',    icon: 'bubul-scormia',   color: '#1E40AF', badge: 'BETA' },
    { code: 'slidia',    route: 'app_landing_slidia',    name: 'Slidia',    tagline: 'Des présentations pro en 1 clic',        icon: 'bubul-slidia',    color: '#E91E8C' },
    { code: 'serenia',   route: 'app_landing_serenia',   name: 'Serenia',   tagline: 'Votre assistant pédagogique IA',         icon: 'bubul-serenia',   color: '#7C3AED' },
    { code: 'monalisia', route: 'app_landing_monalisia', name: 'Monalisia', tagline: 'Des infographies percutantes en 60s',    icon: 'bubul-monalisia', color: '#ED8600' },
    { code: 'castia',    route: 'app_landing_castia',    name: 'Castia',    tagline: 'Donnez une voix à vos formations',       icon: 'bubul-castia',    color: '#309344' },
    { code: 'pixia',     route: 'app_landing_pixia',     name: 'Pixia',     tagline: 'Générez des images IA en quelques secondes', icon: 'bubul-pixia',     color: '#6366F1' },
    { code: 'promptly',  route: 'app_landing_promptly',  name: 'Promptly',  tagline: 'Bibliothèque de prompts partagés',       icon: 'bubul-promptly',  color: '#F97316' },
    { code: 'sam',       route: 'app_landing_sam',       name: 'SAM',       tagline: 'Pilotez votre LMS sans effort',          icon: 'bubul-sam',       color: '#06B6D4' }
] %}
{% set toolDefs = toolDefs ?? defaultToolDefs %}
{# Build tools list avec couleurs DB si disponibles #}
{% set tools = [] %}
{% for t in toolDefs %}
    {% set db = dbToolsMap[t.code] ?? null %}
    {% set tools = tools|merge([{
        code:    t.code,
        route:   t.route,
        name:    db and db.name ? db.name : t.name,
        tagline: t.tagline,
        icon:    db and db.icon ? ('bubul-' ~ db.code) : t.icon,
        color:   db and db.colorPrimary ? db.colorPrimary : t.color,
        badge:   t.badge ?? null
    }]) %}
{% endfor %}

{# ===== Header flottant ===== #}
<header
    class="fixed top-4 left-0 right-0 z-50 flex justify-center px-6 sm:px-6 {{ class }}"
    data-controller="shared--landing-header"
    data-shared--landing-header-scrolled-class="header-scrolled"
>
    {# Pill principale #}
    <div class="w-full max-w-[860px] bg-white/95 backdrop-blur-xl rounded-full border border-primary/10 shadow-[0_4px_24px_rgba(18,129,228,0.08),0_1px_3px_rgba(0,0,0,0.06)] px-3.5 py-2.5 flex items-center gap-1.5">

        {# ===== Logo ===== #}
        <a href="{{ path('app_landing') }}" class="flex items-center px-1 shrink-0 mr-1">
            {% include '_atoms/logo/logo-with-text.html.twig' with {
                showIcon: true,
                showText: true,
                showBadge: false,
                size: 'md'
            } only %}
        </a>

        {# ===== Navigation Desktop ===== #}
        <nav class="hidden lg:flex items-center justify-center gap-0.5 flex-1" data-shared--landing-header-target="nav">

            {# Outils — dropdown mega menu #}
            <div class="nav-item--dropdown relative">
                <a href="{{ path('app_landing') }}#outils"
                   class="flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-[#4A5E80] hover:text-primary hover:bg-primary-muted transition-colors duration-200">
                    {{ toolsLabel }}
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', class: 'mega-chevron transition-transform duration-base opacity-60' } only %}
                </a>

                {# Mega Menu #}
                <div class="mega-menu">
                    {# Colonne gauche : catégories #}
                    <div class="mega-menu-left">
                        <div class="p-5 space-y-4">
                            {% for category in categories %}
                                <div class="p-3 rounded-xl transition-colors duration-200 hover:bg-white/60">
                                    <div class="text-[10px] font-bold tracking-widest text-[#8494B2] uppercase mb-1">{{ category.title }}</div>
                                    <p class="text-xs text-[#4A5E80] leading-relaxed">{{ category.description }}</p>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    {# Colonne droite : liste des outils #}
                    <div class="mega-menu-right p-3">
                        <div class="flex flex-col gap-0.5">
                            {% for tool in tools %}
                                {% set isActive = activeCode is not null and tool.code == activeCode %}
                                <a href="{{ path(tool.route) }}"
                                   class="mega-menu-tool flex items-center gap-3 px-3 py-2 rounded-xl transition-all duration-200 group"
                                   style="--tool-color: {{ tool.color }}; {% if isActive %}background: {{ tool.color }}10;{% endif %}">
                                    <span class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background: {{ tool.color }}{% if isActive %}22{% else %}14{% endif %}; color: {{ tool.color }};">
                                        {% include '_atoms/icon/icon.html.twig' with { name: tool.icon, size: 'sm' } only %}
                                    </span>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-1.5">
                                            <div class="text-sm font-semibold text-[#1B2D4F]">{{ tool.name }}</div>
                                            {% if tool.badge %}
                                                <span class="text-[0.55rem] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded font-mono shrink-0" style="background: {{ tool.color }}18; color: {{ tool.color }};">{{ tool.badge }}</span>
                                            {% endif %}
                                        </div>
                                        <div class="text-xs text-[#8494B2] truncate">{{ tool.tagline }}</div>
                                    </div>
                                    {% if isActive %}
                                        <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ tool.color }};"></span>
                                    {% else %}
                                        <svg class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200 shrink-0" style="color: {{ tool.color }};" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                        </svg>
                                    {% endif %}
                                </a>
                            {% endfor %}
                        </div>
                    </div>

                    {# Footer dégradé #}
                    <div class="mega-menu-footer">
                        <a href="{{ path('app_landing') }}#outils" class="mega-menu-footer-link flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold transition-opacity hover:opacity-80">
                            {{ footerLabel }}
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            {% for navItem in navItems %}
                <a href="{{ navItem.href }}" class="px-3 py-1.5 rounded-full text-sm font-medium text-[#4A5E80] hover:text-primary hover:bg-primary-muted transition-colors duration-200">{{ navItem.label }}</a>
            {% endfor %}
            <a href="{{ path('app_contact') }}"
               class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 {{ app.request.attributes.get('_route') == 'app_contact' ? 'text-primary font-semibold bg-primary-muted' : 'text-[#4A5E80] hover:text-primary hover:bg-primary-muted' }}">
                Contact
            </a>
        </nav>

        {# ===== Actions droite ===== #}
        <div class="flex items-center gap-2 shrink-0 ml-auto">
            {# Connexion — desktop uniquement #}
            <div class="hidden lg:flex items-center gap-2">
                {% include '_atoms/button/button.html.twig' with {
                    label: loginLabel,
                    href: loginUrl,
                    variant: 'primary',
                    size: 'md',
                    radius: 'full',
                    attr: { 'data-shared--landing-header-target': 'loginLink' }
                } only %}
            </div>

            {# Hamburger mobile #}
            <button
                type="button"
                class="lg:hidden flex items-center justify-center w-8 h-8 rounded-full text-[#4A5E80] hover:text-primary hover:bg-primary-muted transition-colors"
                aria-label="Menu"
                data-action="click->shared--landing-header#toggleMobile"
            >
                {% include '_atoms/icon/icon.html.twig' with { name: 'list', size: 'md', color: 'primary' } only %}
            </button>
        </div>
    </div>

    {# ===== Menu Mobile (sous la pill) ===== #}
    <div
        class="lg:hidden hidden absolute top-full mt-2 left-4 right-4 bg-white/[0.98] backdrop-blur-xl rounded-2xl border border-primary/[0.08] shadow-[0_8px_32px_rgba(18,129,228,0.1)]"
        data-shared--landing-header-target="mobileMenu"
    >
        <div class="p-4 space-y-1">

            {# Liste des outils — grille 2 colonnes #}
            <div class="px-2 pb-1 pt-0.5">
                <span class="text-[0.65rem] font-bold uppercase tracking-widest text-[#B0BDCF] font-mono">{{ mobileToolsLabel }}</span>
            </div>
            <div class="grid grid-cols-2 gap-0.5">
                {% for tool in tools %}
                    <a href="{{ path(tool.route) }}"
                       class="flex items-center gap-2 px-2.5 py-2 rounded-xl text-[#4A5E80] hover:text-primary hover:bg-primary-muted transition-colors"
                       data-action="click->shared--landing-header#closeMobile">
                        <span class="w-6 h-6 rounded-lg flex items-center justify-center shrink-0" style="background: {{ tool.color }}14; color: {{ tool.color }};">
                            {% include '_atoms/icon/icon.html.twig' with { name: tool.icon, size: 'xs' } only %}
                        </span>
                        <span class="text-xs font-medium truncate">{{ tool.name }}</span>
                        {% if tool.badge %}
                            <span class="text-[0.5rem] font-bold uppercase px-1 py-0.5 rounded font-mono shrink-0" style="background: {{ tool.color }}18; color: {{ tool.color }};">{{ tool.badge }}</span>
                        {% endif %}
                    </a>
                {% endfor %}
            </div>

            {# Autres liens #}
            <div class="border-t border-primary/[0.06] pt-2 mt-2 space-y-0.5">
                {% for navItem in navItems %}
                    <a href="{{ navItem.href }}" class="block px-3 py-2.5 rounded-xl text-sm font-medium text-[#4A5E80] hover:text-primary hover:bg-primary-muted transition-colors" data-action="click->shared--landing-header#closeMobile">{{ navItem.label }}</a>
                {% endfor %}
                <a href="{{ path('app_contact') }}"
                   class="block px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ app.request.attributes.get('_route') == 'app_contact' ? 'text-primary font-semibold bg-primary-muted' : 'text-[#4A5E80] hover:text-primary hover:bg-primary-muted' }}"
                   data-action="click->shared--landing-header#closeMobile">
                    Contact
                </a>
            </div>

            {# CTA mobile #}
            <div class="border-t border-primary/[0.06] pt-3 mt-1">
                {% include '_atoms/button/button.html.twig' with {
                    label: loginLabel,
                    href: loginUrl,
                    variant: 'primary',
                    size: 'md',
                    radius: 'full',
                    width: 'full'
                } only %}
            </div>
        </div>
    </div>
</header>