{#
 # ============================================================================
 # ORGANISM: FEATURES ALTERNATING
 # ============================================================================
 #
 # Section features avec disposition alternée texte/visuel.
 # Chaque feature alterne gauche/droite. Support placeholder ou vraie image.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type  | Défaut | Description                                    |
 # |-----------|-------|--------|------------------------------------------------|
 # | features  | array | []     | Liste des features (voir structure ci-dessous) |
 # | class     | string| ''     | Classes additionnelles sur la section          |
 # | id        | string| 'features' | Ancre HTML                               |
 #
 # ============================================================================
 # STRUCTURE D'UNE FEATURE (features[])
 # ============================================================================
 #
 # | Clé            | Type   | Description                                   |
 # |----------------|--------|-----------------------------------------------|
 # | tagLabel       | string | Étiquette mono en haut (ex: 'Création flexible')|
 # | titleHtml      | string | H3 avec HTML autorisé (em.serif pour italique)|
 # | desc           | string | Paragraphe descriptif                         |
 # | bullets        | array  | Liste de strings pour les points clés         |
 # | stat           | object | {val: '36×', text: 'plus rapide...'} optionnel|
 # | icon           | string | Nom de l'icône Solar pour le placeholder      |
 # | iconColor      | string | Couleur token pour l'icône (ex: 'primary')    |
 # | screenshotNote | string | Texte du placeholder (si pas d'image)         |
 # | image          | string | Chemin image réelle (null = placeholder)       |
 # | imageAlt       | string | Texte alt SEO                                 |
 # | accentColor    | string | Couleur hex d'accent (défaut: '#1281E4')      |
 #
 # ============================================================================
 #}

{% set features      = features      ?? [] %}
{% set class         = class         ?? '' %}
{% set id            = id            ?? 'features' %}
{% set sectionStyle  = sectionStyle  ?? '' %}

<section class="py-14 lg:py-24 {{ class }}" id="{{ id }}" {% if sectionStyle %}style="{{ sectionStyle }}"{% endif %}>
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8 flex flex-col gap-16 lg:gap-24">

        {% for feature in features %}
            {% set accent = feature.accentColor ?? '#1281E4' %}
            {% set isReversed = loop.index is even %}

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center reveal">

                {# Text block #}
                <div class="{{ isReversed ? 'order-1 lg:order-2' : 'order-1' }}">

                    {# Tag label — couleur dynamique via customColor #}
                    {% if feature.tagLabel is defined and feature.tagLabel %}
                        <div class="mb-4">
                            {% include '_atoms/badge/badge.html.twig' with {
                                label: feature.tagLabel,
                                customColor: accent,
                                dot: true,
                                size: 'sm',
                                rounded: 'full'
                            } only %}
                        </div>
                    {% endif %}

                    {# Title #}
                    {% if feature.titleHtml is defined and feature.titleHtml %}
                        <h3 class="text-[clamp(1.5rem,2.2vw,1.9rem)] font-bold tracking-[-0.02em] leading-[1.2] mb-3 text-[#1B2D4F]">
                            {{ feature.titleHtml|raw }}
                        </h3>
                    {% endif %}

                    {# Description #}
                    {% if feature.desc is defined and feature.desc %}
                        <p class="text-[0.95rem] text-[#4A5E80] leading-[1.7] mb-4">{{ feature.desc }}</p>
                    {% endif %}

                    {# Bullet points #}
                    {% if feature.bullets is defined and feature.bullets|length > 0 %}
                        <ul class="flex flex-col gap-2.5">
                            {% for bullet in feature.bullets %}
                                <li class="flex items-center gap-2.5 text-[0.9rem] text-[#4A5E80]">
                                    <span class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-[0.6rem] font-bold"
                                          style="background: {{ accent }}18; color: {{ accent }};">✓</span>
                                    {{ bullet }}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    {# Optional stat #}
                    {% if feature.stat is defined and feature.stat %}
                        <div class="mt-6 pt-5 border-t" style="border-color: {{ accent }}15;">
                            {% if feature.stat.before is defined %}
                                {# Before/after design #}
                                <div class="text-[0.68rem] font-semibold uppercase tracking-widest text-[#B0BDCF] font-mono mb-3">{{ feature.stat.label ?? '' }}</div>
                                <div class="flex items-stretch gap-0 rounded-xl overflow-hidden border" style="border-color: {{ accent }}18;">
                                    {# Avant #}
                                    <div class="flex-1 flex flex-col items-center justify-center gap-0.5 px-2 sm:px-4 py-3 bg-[#F9FAFB]">
                                        <span class="text-[0.55rem] sm:text-[0.6rem] font-bold uppercase tracking-widest text-[#B0BDCF] font-mono">Avant</span>
                                        <span class="text-[1.1rem] sm:text-[1.5rem] font-bold text-[#C4CDD8] line-through leading-tight">{{ feature.stat.before }}</span>
                                    </div>
                                    {# Séparateur central avec badge #}
                                    <div class="flex flex-col items-center justify-center px-2 sm:px-3 py-3 relative" style="background: {{ accent }}08;">
                                        <span class="px-2 sm:px-2.5 py-1 rounded-full text-[0.65rem] sm:text-[0.7rem] font-black text-white font-mono whitespace-nowrap"
                                              style="background: linear-gradient(135deg, {{ accent }}, {{ accent }}CC);">{{ feature.stat.val }}</span>
                                    </div>
                                    {# Après #}
                                    <div class="flex-1 flex flex-col items-center justify-center gap-0.5 px-2 sm:px-4 py-3" style="background: {{ accent }}08;">
                                        <span class="text-[0.55rem] sm:text-[0.6rem] font-bold uppercase tracking-widest font-mono" style="color: {{ accent }}CC;">Après</span>
                                        <span class="text-[1.1rem] sm:text-[1.5rem] font-extrabold leading-tight" style="color: {{ accent }};">{{ feature.stat.after }}</span>
                                    </div>
                                </div>
                            {% else %}
                                {# Simple stat design #}
                                <div class="text-[0.68rem] font-semibold uppercase tracking-widest text-[#B0BDCF] font-mono mb-1">{{ feature.stat.label ?? '' }}</div>
                                <div class="flex items-baseline gap-2">
                                    <span class="text-[2.8rem] font-black tracking-[-0.05em] leading-none"
                                          style="background: linear-gradient(135deg, {{ accent }}, {{ accent }}90); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">{{ feature.stat.val }}</span>
                                    <span class="text-[0.85rem] font-medium text-[#4A5E80]">{{ feature.stat.text|raw }}</span>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}

                </div>

                {# Visual block #}
                <div class="{{ isReversed ? 'order-2 lg:order-1' : 'order-2' }}">
                    {% if feature.visualHtml is defined and feature.visualHtml %}
                        {{ feature.visualHtml|raw }}
                    {% elseif feature.image is defined and feature.image %}
                        <div class="rounded-2xl overflow-hidden border border-gray-100 shadow-[0_12px_40px_rgba(0,0,0,0.06)]">
                            <img src="{{ feature.image }}"
                                 alt="{{ feature.imageAlt ?? '' }}"
                                 class="w-full h-auto block"
                                 loading="lazy">
                        </div>
                    {% else %}
                        <div class="rounded-2xl overflow-hidden border border-dashed aspect-[4/3] flex flex-col items-center justify-center gap-2 text-[0.82rem] font-medium"
                             style="border-color: {{ accent }}15; background: {{ accent }}04; color: #8494B2;">
                            {% if feature.icon is defined and feature.icon %}
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: feature.icon,
                                    size: '5xl',
                                    color: feature.iconColor ?? 'primary'
                                } only %}
                            {% endif %}
                            {% if feature.screenshotNote is defined and feature.screenshotNote %}
                                <span>{{ feature.screenshotNote }}</span>
                            {% endif %}
                            <span class="text-[0.68rem] px-3 py-1 rounded-full font-mono"
                                  style="color: {{ accent }}; background: {{ accent }}12;">Votre screenshot ici</span>
                        </div>
                    {% endif %}
                </div>

            </div>
        {% endfor %}

    </div>
</section>