{#
 # ============================================================================
 # ORGANISM: LANDING HOW IT WORKS TOOL
 # ============================================================================
 #
 # Version paramétrable de how-it-works pour les pages d'outils individuels.
 # Supporte un nombre arbitraire d'étapes avec disposition alternée.
 # Réutilisable pour Moodia (5 étapes), Slidia, Serenia, etc.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type   | Défaut                          | Description          |
 # |-------------|--------|---------------------------------|----------------------|
 # | surtitle    | string | 'COMMENT ÇA MARCHE'             | Texte au-dessus      |
 # | title       | string | 'De votre contenu à la ...'     | Titre H2             |
 # | subtitle    | string | ''                              | Sous-titre H2        |
 # | steps       | array  | []                              | Étapes du workflow   |
 # | class       | string | ''                              | Classes CSS          |
 #
 # ============================================================================
 # STRUCTURE D'UNE ÉTAPE (steps[])
 # ============================================================================
 #
 # | Clé             | Type   | Description                                   |
 # |-----------------|--------|-----------------------------------------------|
 # | badge           | string | Étiquette courte ('Upload', 'Configuration')   |
 # | title           | string | Titre de l'étape (H3)                         |
 # | description     | string | Description de l'étape                       |
 # | image           | string | Chemin image, ou null pour placeholder        |
 # | imageAlt        | string | Texte alt SEO                                 |
 # | placeholderNote | string | Note affichée si image est null               |
 #
 # ============================================================================
 #}

{% set surtitle = surtitle ?? 'COMMENT ÇA MARCHE' %}
{% set title = title ?? 'De votre contenu à la formation publiée' %}
{% set subtitle = subtitle ?? '' %}
{% set steps = steps ?? [] %}
{% set class = class ?? '' %}

{% set delayClasses = ['', 'reveal-delay-1', 'reveal-delay-2', 'reveal-delay-3', 'reveal-delay-4'] %}

<section class="py-28 lg:py-40 bg-gray-50/40 {{ class }}" id="how-it-works">
    <div class="max-w-[1100px] mx-auto px-6 lg:px-8">

        {# Header #}
        <div class="text-center mb-20 reveal">
            <p class="font-secondary text-xs font-bold tracking-[3px] text-primary mb-5 uppercase">{{ surtitle }}</p>
            <h2 class="font-secondary text-3xl md:text-4xl lg:text-[2.5rem] font-bold text-gray-900 mb-5">
                {{ title }}
            </h2>
            {% if subtitle %}
                <p class="text-gray-500 text-lg max-w-[600px] mx-auto leading-relaxed">{{ subtitle }}</p>
            {% endif %}
        </div>

        {# Étapes — disposition alternée texte/image #}
        <div class="space-y-24 lg:space-y-32">
            {% for step in steps %}
                <div class="flex flex-col {{ loop.index is odd ? 'lg:flex-row' : 'lg:flex-row-reverse' }} items-center gap-12 lg:gap-20 reveal {{ delayClasses[loop.index0] ?? '' }}">

                    {# Côté texte #}
                    <div class="lg:w-5/12 text-center lg:text-left">
                        <div class="flex items-center gap-3 justify-center lg:justify-start mb-5">
                            <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-primary text-white text-lg font-bold font-secondary shadow-lg shadow-primary/30 flex-shrink-0">
                                {{ loop.index }}
                            </div>
                            {% if step.badge is defined and step.badge %}
                                <span class="inline-flex px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-primary/8 text-primary">
                                    {{ step.badge }}
                                </span>
                            {% endif %}
                        </div>
                        <h3 class="font-secondary text-2xl lg:text-3xl font-bold text-gray-900 mb-4">
                            {{ step.title }}
                        </h3>
                        <p class="text-gray-500 leading-relaxed text-base lg:text-lg">
                            {{ step.description }}
                        </p>
                    </div>

                    {# Côté image / placeholder #}
                    <div class="lg:w-7/12">
                        <div class="rounded-2xl overflow-hidden border border-gray-100" style="box-shadow:0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.05);">
                            {% if step.image is defined and step.image %}
                                <img src="{{ step.image }}"
                                     alt="{{ step.imageAlt ?? '' }}"
                                     class="w-full h-auto block"
                                     loading="lazy"
                                     width="700" height="437">
                            {% else %}
                                <div class="aspect-[16/10] flex items-center justify-center bg-gray-50">
                                    <div class="text-center p-8">
                                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/8 mb-4">
                                            <span class="font-display text-2xl font-bold text-primary">{{ loop.index }}</span>
                                        </div>
                                        <p class="text-gray-400 text-sm font-medium">{{ step.placeholderNote ?? ('Étape ' ~ loop.index ~ ' — screenshot à venir') }}</p>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>

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

    </div>
</section>