@php
    $steps = [
        ['number' => '01', 'title' => 'Audit & Stratégie Digitale', 'short' => 'Audit', 'icon' => 'ClipboardDocumentCheckIcon', 'metric' => '2 semaines', 'label' => 'Délai audit complet', 'color' => '#e53935', 'description' => 'Nous analysons votre site, vos réseaux sociaux, vos campagnes et vos parcours pour construire une stratégie ancrée dans la data.'],
        ['number' => '02', 'title' => 'Mise en place de tests opérationnels', 'short' => 'Tests', 'icon' => 'BeakerIcon', 'metric' => '30 jours', 'label' => 'Premier cycle de test', 'color' => '#f04438', 'description' => 'Nous sélectionnons les canaux adaptés, lançons les tests A/B et observons les signaux de conversion en continu.'],
        ['number' => '03', 'title' => 'Analyse & Optimisations continues', 'short' => 'Optimisation', 'icon' => 'ArrowTrendingUpIcon', 'metric' => '+245%', 'label' => 'ROI moyen constaté', 'color' => '#c62828', 'description' => 'Nous suivons les indicateurs clés, ajustons les actions et transformons la performance en progression durable.'],
    ];
@endphp

<section id="methodologie" class="atirao-methodology" aria-labelledby="atirao-methodology-title" data-atirao-methodology data-atirao-reveal-section>
    <div class="atirao-container">
        <div class="atirao-section-heading atirao-methodology__heading">
            <div class="atirao-reveal" data-atirao-reveal>
                <div class="atirao-section-label">
                    <span></span>
                    Notre méthodologie
                </div>
                <h2 id="atirao-methodology-title">
                    <span>Growth</span>
                    <span>Engine</span>
                </h2>
            </div>
            <p class="atirao-reveal" data-atirao-reveal>
                Un processus éprouvé en 3 étapes pour transformer votre présence digitale en moteur de croissance mesurable.
            </p>
        </div>

        <div class="atirao-methodology__mobile">
            @foreach ($steps as $step)
                <article class="atirao-methodology__mobile-step" style="--step-color: {{ $step['color'] }}">
                    <span>{{ $step['number'] }}</span>
                    <div>
                        <h3>{{ $step['title'] }}</h3>
                        <p>{{ $step['description'] }}</p>
                        <strong>{{ $step['metric'] }} <small>{{ $step['label'] }}</small></strong>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="atirao-methodology__desktop">
            <div class="atirao-methodology__steps" role="list">
                @foreach ($steps as $step)
                    <article class="atirao-methodology-step atirao-reveal {{ $loop->first ? 'is-active' : '' }}" style="--step-color: {{ $step['color'] }}" data-atirao-reveal data-atirao-methodology-step="{{ $step['number'] }}" role="listitem" tabindex="0">
                        <div class="atirao-methodology-step__topline">
                            <div class="atirao-methodology-step__number">
                                <span>{{ $step['number'] }}</span>
                                <i></i>
                            </div>
                            <div class="atirao-methodology-step__icon">
                                <x-ui.icon :name="$step['icon']" :size="18" />
                            </div>
                        </div>
                        <h4>{{ $step['title'] }}</h4>
                        <p>{{ $step['description'] }}</p>
                        <strong>{{ $step['metric'] }} <small>{{ $step['label'] }}</small></strong>
                    </article>
                @endforeach
            </div>

            <aside class="atirao-methodology__sticky-panel" aria-label="Progression methodologie">
                <div class="atirao-methodology__indicators">
                    @foreach ($steps as $step)
                        <button class="atirao-methodology__indicator {{ $loop->first ? 'is-active' : '' }}" type="button" style="--step-color: {{ $step['color'] }}" data-atirao-methodology-indicator="{{ $step['number'] }}">
                            <span></span>
                            <div>
                                <strong>{{ $step['number'] }} / {{ $step['short'] }}</strong>
                                <small>{{ $step['label'] }}</small>
                            </div>
                        </button>
                    @endforeach
                </div>
                <div class="atirao-methodology__panels">
                    @foreach ($steps as $step)
                        <div class="atirao-methodology__panel {{ $loop->first ? 'is-active' : '' }}" style="--step-color: {{ $step['color'] }}" data-atirao-methodology-panel="{{ $step['number'] }}">
                            <div>
                                <span><x-ui.icon :name="$step['icon']" :size="20" /></span>
                                <div>
                                    <strong>{{ $step['metric'] }}</strong>
                                    <small>{{ $step['label'] }}</small>
                                </div>
                            </div>
                            <i style="width: {{ $loop->iteration * 33.333 }}%"></i>
                            <p>{{ $step['description'] }}</p>
                        </div>
                    @endforeach
                </div>
            </aside>
        </div>
    </div>
</section>