{#
 # ============================================================================
 # ORGANISM: TOOLS ECOSYSTEM
 # ============================================================================
 #
 # Section "Découvrez les autres outils" — grille de liens vers les outils Bubul.
 # Utilisée sur les pages de présentation d'outils pour favoriser la découverte.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre  | Type   | Défaut              | Description                   |
 # |------------|--------|---------------------|-------------------------------|
 # | surtitle   | string | 'Écosystème Bubul'  | Mono label au-dessus          |
 # | titleHtml  | string | ''                  | Titre H2 (HTML brut autorisé) |
 # | subtitle   | string | ''                  | Sous-titre                    |
 # | tools      | array  | []                  | [{route,iconName,iconColor,iconBg,label,desc}] |
 # | bgClass    | string | 'bg-white'          | Classe background section     |
 # | accentColor| string | '#1281E4'           | Couleur d'accentuation        |
 # | class      | string | ''                  | Classes additionnelles        |
 #
 # ============================================================================
 # STRUCTURE D'UN OUTIL (tools[])
 # ============================================================================
 #
 # | Clé        | Type   | Description                                         |
 # |------------|--------|-----------------------------------------------------|
 # | route      | string | Nom de route Symfony (ex: 'app_landing_slidia')     |
 # | iconName   | string | Nom de l'icône (ex: 'bubul-slidia')                 |
 # | iconColor  | string | Token couleur (ex: 'pink')                          |
 # | iconBg     | string | Couleur de fond hex de l'icône (rgba(...))          |
 # | label      | string | Nom de l'outil                                      |
 # | desc       | string | Description courte                                  |
 #
 # ============================================================================
 #}

{% set surtitle    = surtitle    ?? 'Écosystème Bubul' %}
{% set titleHtml   = titleHtml   ?? '' %}
{% set exclude     = exclude     ?? [] %}
{% set tools       = (tools is defined and tools|length > 0) ? tools : landing_tools(exclude) %}
{% set tools       = tools|slice(0, 5) %}
{% set _toolCount  = tools|length %}
{% set subtitle    = subtitle    ?? (_toolCount ~ ' autre' ~ (_toolCount > 1 ? 's' : '') ~ ' outil' ~ (_toolCount > 1 ? 's' : '') ~ ' IA pour couvrir tous vos besoins pédagogiques — dans la même interface, avec les mêmes tokens.') %}
{% set bgClass     = bgClass     ?? 'bg-white' %}
{% set accentColor = accentColor ?? '#1281E4' %}
{% set class       = class       ?? '' %}
{% set nextTool    = nextTool    ?? null %}

{# Couleurs dynamiques depuis la DB (pour les fonds/bordures par défaut) #}
{% set colMoodia    = tool_color_details['moodia'].primary    ?? '#0C81E4' %}
{% set colSlidia    = tool_color_details['slidia'].primary    ?? '#E91E8C' %}
{% set colSerenia   = tool_color_details['serenia'].primary   ?? '#7C3AED' %}
{% set colMonalisia = tool_color_details['monalisia'].primary ?? '#ED8600' %}
{% set colCastia    = tool_color_details['castia'].primary    ?? '#309344' %}
{% set colSam       = tool_color_details['sam'].primary       ?? '#06B6D4' %}
{% set colPromptly  = tool_color_details['promptly'].primary  ?? '#F97316' %}
{% set colPixia     = tool_color_details['pixia'].primary     ?? '#6366F1' %}

<section class="py-14 lg:py-24 {{ bgClass }} {{ class }}" id="autres-outils">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">

        <div class="flex justify-center mb-4">
            <span class="inline-flex items-center gap-1.5 text-[0.72rem] font-semibold uppercase tracking-[0.1em] font-mono"
                  style="color: {{ accentColor }};">
                <span class="w-1.5 h-1.5 rounded-full inline-block" style="background: {{ accentColor }};"></span>
                {{ surtitle }}
            </span>
        </div>

        {% if titleHtml %}
            <h2 class="text-center text-[clamp(1.8rem,3vw,2.5rem)] font-bold tracking-[-0.03em] leading-[1.15] mb-5 max-w-[600px] mx-auto text-[#1B2D4F]">
                {{ titleHtml|raw }}
            </h2>
        {% endif %}

        {% if subtitle %}
            <p class="text-center text-base text-[#4A5E80] leading-[1.7] max-w-[520px] mx-auto mb-12">{{ subtitle }}</p>
        {% endif %}

        {# Mapping route → couleur DB #}
        {% set routeColors = {
            'app_landing_slidia':    colSlidia,
            'app_landing_serenia':   colSerenia,
            'app_landing_monalisia': colMonalisia,
            'app_landing_castia':    colCastia,
            'app_landing_sam':       colSam,
            'app_landing_moodia':    colMoodia,
            'app_landing_promptly':  colPromptly,
            'app_landing_pixia':     colPixia
        } %}

        {% if tools|length > 0 %}
            <div class="tools-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 {% if nextTool %}mb-8{% endif %}">
                {% for tool in tools %}
                    {% set toolColor = routeColors[tool.route] ?? accentColor %}
                    <div class="reveal" style="transition-delay: {{ loop.index0 * 0.06 }}s;">
                    <a href="{{ path(tool.route) }}"
                       class="flex flex-col h-full rounded-2xl overflow-hidden border text-inherit no-underline group"
                       style="background: linear-gradient(160deg, {{ toolColor }}10 0%, white 55%); border-color: {{ toolColor }}20; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s ease, box-shadow 0.22s ease;"
                       onmouseover="this.style.borderColor='{{ toolColor }}50'; this.style.boxShadow='0 20px 56px {{ toolColor }}22, 0 4px 16px {{ toolColor }}0c'; this.style.transform='translateY(-7px) scale(1.015)';"
                       onmouseout="this.style.borderColor='{{ toolColor }}20'; this.style.boxShadow=''; this.style.transform='';">
                        {# Barre couleur top #}
                        <div style="height:3px; background: linear-gradient(90deg, {{ toolColor }}, {{ toolColor }}60);"></div>

                        <div class="flex flex-col items-center text-center p-5 gap-3 flex-1">
                            {# Icône #}
                            <div class="w-11 h-11 rounded-2xl flex items-center justify-center shrink-0"
                                 style="background: {{ toolColor }}14;">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: tool.iconName,
                                    size: 'lg',
                                    colorPrimary: toolColor,
                                    colorSecondary: toolColor,
                                    opacitySecondary: '0.3'
                                } only %}
                            </div>

                            {# Nom + badge #}
                            <div>
                                <div class="flex items-center justify-center gap-1.5 mb-1.5">
                                    <span class="text-[0.9rem] font-bold text-[#1B2D4F]">{{ tool.label }}</span>
                                    {% if tool.badge is defined %}
                                        <span class="text-[0.58rem] font-bold px-1.5 py-0.5 rounded font-mono"
                                              style="background: {{ toolColor }}15; color: {{ toolColor }};">{{ tool.badge }}</span>
                                    {% endif %}
                                </div>
                                <div class="text-[0.72rem] text-[#8494B2] leading-snug">{{ tool.desc }}</div>
                            </div>

                            {# Découvrir → #}
                            <div class="mt-auto flex items-center gap-1 text-[0.72rem] font-semibold pt-1 group-hover:gap-2 transition-all duration-200"
                                 style="color: {{ toolColor }};">
                                <span>Découvrir</span>
                                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 18l6-6-6-6"/></svg>
                            </div>
                        </div>
                    </a>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {# Outil suivant #}
        {% if nextTool %}
            <div class="reveal flex justify-center">
                <a href="{{ path(nextTool.route) }}"
                   class="group inline-flex items-center gap-4 px-6 py-4 rounded-2xl border transition-all duration-300 hover:-translate-y-0.5 no-underline"
                   style="background: {{ nextTool.iconBg ?? (accentColor ~ '08') }}; border-color: {{ accentColor }}20;"
                   onmouseover="this.style.borderColor='{{ accentColor }}50'; this.style.boxShadow='0 8px 24px {{ accentColor }}14';"
                   onmouseout="this.style.borderColor='{{ accentColor }}20'; this.style.boxShadow='';">
                    <div class="text-[0.72rem] font-semibold uppercase tracking-widest text-[#8494B2]">Outil suivant</div>
                    <div class="w-px h-6 bg-[#E5E7EB]"></div>
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0"
                         style="background: {{ nextTool.iconBg ?? (accentColor ~ '14') }};">
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: nextTool.iconName,
                            size: 'md',
                            color: nextTool.iconColor ?? 'primary'
                        } only %}
                    </div>
                    <div>
                        <div class="text-[0.92rem] font-bold text-[#1B2D4F]">{{ nextTool.label }}</div>
                        <div class="text-[0.75rem] text-[#8494B2]">{{ nextTool.desc }}</div>
                    </div>
                    <svg class="w-4 h-4 text-[#8494B2] group-hover:translate-x-1 transition-transform duration-200 shrink-0" style="color: {{ accentColor }};" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
                </a>
            </div>
        {% endif %}

    </div>
</section>