{#
 # ============================================================================
 # ORGANISM: STEPS TOOL
 # ============================================================================
 #
 # Section "Comment ça marche" paramétrée pour les pages de présentation d'outils.
 # Deux variantes disponibles : cercles (défaut) et cards (design Moodia).
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre    | Type   | Défaut              | Description                          |
 # |--------------|--------|---------------------|--------------------------------------|
 # | surtitle     | string | 'Comment ça marche' | Mono label au-dessus                 |
 # | titleHtml    | string | ''                  | Titre H2 (HTML brut autorisé)        |
 # | subtitle     | string | ''                  | Sous-titre descriptif                |
 # | steps        | array  | []                  | [{num?, time?, title, desc}]         |
 # | variant      | string | 'circles'           | 'circles' ou 'cards'                 |
 # | bgClass      | string | 'bg-[#F6F9FE]'      | Classe background (variant circles)  |
 # | bgStyle      | string | null                | CSS background inline (variant cards)|
 # | accentColor  | string | '#1281E4'           | Couleur principale                   |
 # | gradientEnd  | string | accentColor         | Couleur fin dégradé (variant cards)  |
 # | id           | string | 'how-it-works'      | Ancre HTML                           |
 # | class        | string | ''                  | Classes additionnelles               |
 #
 # ============================================================================
 # EXEMPLE variant 'cards'
 # ============================================================================
 #
 # {% include '_organisms/landing/steps-tool.html.twig' with {
 #     variant: 'cards',
 #     titleHtml: '4 étapes. <span style="color:#ED8600;">1 minute.</span>',
 #     accentColor: '#ED8600',
 #     gradientEnd: '#F59E0B',
 #     steps: [
 #         { num: '1', time: '10 secondes', title: 'Importez', desc: 'Décrivez...' },
 #         { num: '2', time: '1 minute',    title: 'Générez',  desc: 'L\'IA...'   },
 #     ]
 # } only %}
 #
 # ============================================================================
 #}

{% set surtitle     = surtitle     ?? 'Comment ça marche' %}
{% set titleHtml    = titleHtml    ?? '' %}
{% set subtitle     = subtitle     ?? '' %}
{% set steps        = steps        ?? [] %}
{% set variant      = variant      ?? 'circles' %}
{% set bgClass      = bgClass      ?? 'bg-[#F6F9FE]' %}
{% set bgStyle      = bgStyle      ?? null %}
{% set accentColor  = accentColor  ?? '#1281E4' %}
{% set gradientEnd  = gradientEnd  ?? accentColor %}
{% set id           = id           ?? 'how-it-works' %}
{% set class        = class        ?? '' %}

{% set sectionBg = bgStyle ? 'style="' ~ bgStyle ~ '"' : '' %}
<section class="py-14 lg:py-24 relative overflow-hidden {{ variant == 'cards' ? '' : bgClass }} {{ class }}" id="{{ id }}" {{ sectionBg|raw }}>
    <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">

        {# ===== Header commun ===== #}
        <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-14">
                {{ subtitle }}
            </p>
        {% else %}
            <div class="mb-14"></div>
        {% endif %}

        {# ===== Variant CARDS ===== #}
        {% if variant == 'cards' %}

            {% set cols = steps|length == 3 ? 'lg:grid-cols-3' : (steps|length == 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4') %}
            <div class="grid grid-cols-1 sm:grid-cols-2 {{ cols }} gap-4 lg:gap-6">
                {% for step in steps %}
                <div class="reveal group" style="transition-delay: {{ loop.index0 * 0.1 }}s;">
                    <div class="h-full bg-white rounded-2xl border p-6 flex flex-col gap-4 transition-all duration-300 group-hover:-translate-y-1 group-hover:shadow-[0_12px_40px_rgba(0,0,0,0.06)]"
                         style="border-color: {{ accentColor }}18;">

                        {# Numéro + badge temps #}
                        <div class="flex items-center justify-between">
                            <div class="w-12 h-12 rounded-xl flex items-center justify-center"
                                 style="background: {{ accentColor }}12; border: 1.5px solid {{ accentColor }}22;">
                                <span class="text-[1.3rem] font-black leading-none"
                                      style="color: {{ accentColor }};">{{ step.num ?? loop.index }}</span>
                            </div>
                            {% if step.time is defined and step.time %}
                                <span class="text-[0.65rem] font-bold px-2.5 py-1 rounded-full font-mono"
                                      style="background: {{ accentColor }}10; color: {{ accentColor }};">
                                    {{ step.time }}
                                </span>
                            {% endif %}
                        </div>

                        {# Texte #}
                        <div>
                            <div class="text-[0.98rem] font-bold mb-2 text-[#1B2D4F]">{{ step.title }}</div>
                            <p class="text-[0.84rem] text-[#4A5E80] leading-relaxed">{{ step.desc }}</p>
                        </div>

                        {# Trait gradient au hover #}
                        <div class="mt-auto h-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                             style="background: linear-gradient(90deg, {{ accentColor }}, {{ gradientEnd }});"></div>

                    </div>
                </div>
                {% endfor %}
            </div>

        {# ===== Variant CIRCLES (défaut) ===== #}
        {% else %}

            <div class="relative">
                <div class="hidden lg:block absolute top-10 left-[12%] right-[12%] h-px"
                     style="background: linear-gradient(90deg, transparent, {{ accentColor }}60, transparent);"></div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{{ steps|length > 3 ? '4' : steps|length }} gap-3 sm:gap-6">
                    {% for step in steps %}
                        <div class="reveal relative group flex sm:flex-col items-center sm:items-center gap-5 sm:gap-0 sm:text-center"
                             style="transition-delay:{{ loop.index0 * 0.1 }}s">

                            <div class="w-14 h-14 sm:w-20 sm:h-20 rounded-full bg-white border-2 flex items-center justify-center shrink-0 sm:mx-auto sm:mb-6 relative z-10 transition-all duration-300 group-hover:shadow-[0_0_0_8px_var(--step-ring)]"
                                 style="border-color: {{ accentColor }}30; --step-ring: {{ accentColor }}12;">
                                <span class="text-[1.1rem] sm:text-[1.4rem] font-bold" style="color: {{ accentColor }};">{{ step.num ?? loop.index }}</span>
                            </div>

                            <div class="flex-1 sm:flex-none">
                                <div class="text-[0.98rem] sm:text-[1.05rem] font-bold mb-1 sm:mb-2 text-[#1B2D4F]">{{ step.title }}</div>
                                <p class="text-[0.84rem] sm:text-[0.88rem] text-[#4A5E80] leading-relaxed sm:max-w-[260px] sm:mx-auto">{{ step.desc }}</p>
                                {% if step.time is defined and step.time %}
                                    <div class="mt-2 sm:mt-3">
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: step.time,
                                            variant: 'info',
                                            size: 'xs',
                                            rounded: 'full'
                                        } only %}
                                    </div>
                                {% endif %}
                            </div>

                        </div>
                    {% endfor %}
                </div>
            </div>

        {% endif %}

    </div>
</section>