{#
 # ============================================================================
 # ORGANISM: LANDING HOW IT WORKS
 # ============================================================================
 #
 # Section "Comment ça marche" — alternating steps with screenshots.
 # Fully parameterized: all text and images passed via Twig parameters.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig (not used directly, but available)
 #
 # ============================================================================
 # PARAMETRES
 # ============================================================================
 #
 # | Parametre  | Type   | Defaut                         | Description                    |
 # |------------|--------|--------------------------------|--------------------------------|
 # | eyebrow    | string | 'COMMENT ÇA MARCHE'            | Eyebrow text above title       |
 # | title      | string | 'De l\'idée à la formation...'  | H2 title                       |
 # | subtitle   | string | 'Bubul accompagne chaque...'    | Subtitle text                  |
 # | steps      | array  | (default 3 steps)               | [{number, title, description, image, imageAlt}] |
 # | class      | string | ''                              | Additional CSS classes         |
 # | id         | string | 'how-it-works'                  | HTML anchor id                 |
 #
 # ============================================================================
 # STRUCTURE D'UNE STEP (steps[])
 # ============================================================================
 #
 # | Cle         | Type   | Description                              |
 # |-------------|--------|------------------------------------------|
 # | number      | int    | Step number (auto from loop if omitted)  |
 # | title       | string | Step heading                             |
 # | description | string | Step description paragraph               |
 # | image       | string | Image path                               |
 # | imageAlt    | string | Alt text for the image                   |
 #
 # ============================================================================
 # USAGE EXAMPLES
 # ============================================================================
 #
 # {% include '_organisms/landing/how-it-works.html.twig' with {
 #     steps: myCustomSteps
 # } only %}
 #
 # ============================================================================
 #}

{% set eyebrow = eyebrow ?? 'COMMENT ÇA MARCHE' %}
{% set title = title ?? 'De l\'idée à la formation publiée' %}
{% set subtitle = subtitle ?? 'Bubul accompagne chaque étape — du déploiement de votre LMS à la publication de vos contenus. Aucune compétence technique requise.' %}
{% set id = id ?? 'how-it-works' %}
{% set class = class ?? '' %}

{% set defaultSteps = [
    {
        title: 'Choisissez votre outil',
        description: 'Cours LMS, présentation, podcast, infographie… Sélectionnez l\'outil adapté à votre besoin et déposez votre contenu ou décrivez votre projet.',
        image: '/img/landing/step1.png',
        imageAlt: 'Sélection de l\'outil Bubul'
    },
    {
        title: 'L\'IA génère en quelques minutes',
        description: 'Cours structurés, quiz, présentations, infographies, podcasts — tout est généré automatiquement selon vos paramètres.',
        image: '/img/landing/step2.png',
        imageAlt: 'Génération IA en cours'
    },
    {
        title: 'Publiez et transmettez',
        description: 'Relisez, ajustez si besoin, puis exportez ou déployez en un clic. Vos apprenants accèdent immédiatement à un contenu de qualité professionnelle.',
        image: '/img/landing/step3.png',
        imageAlt: 'Déploiement et publication'
    }
] %}

{% set steps = steps ?? defaultSteps %}

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

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

        {# Steps — alternating layout #}
        <div class="space-y-24 lg:space-y-32">
            {% for step in steps %}
                {% set stepNumber = step.number ?? loop.index %}
                {% set isReversed = loop.index is even %}

                <div class="flex flex-col {{ isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row' }} items-center gap-12 lg:gap-20">
                    {# Text #}
                    <div class="lg:w-5/12 text-center lg:text-left">
                        <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 mb-6">{{ stepNumber }}</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>
                    {# Image #}
                    <div class="lg:w-7/12">
                        <div class="rounded-2xl overflow-hidden shadow-xl shadow-gray-200/80 border border-gray-100">
                            <img src="{{ step.image }}" alt="{{ step.imageAlt ?? step.title }}" class="w-full h-auto block" loading="lazy">
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

    </div>
</section>