@php
    $cases = [

        [
            'client'  => 'eqdom',
            'number'  => '01',
            'logo'    => 'CaseStudiesImages/EQDOM.svg',
            'bg'      => '#f4f6f9',
            'tag'     => 'Leads & Social Media',
            'name'    => 'Eqdom',
            'title'   => 'Multiplier les résultats par une stratégie intégrée',
            'excerpt' => 'Acteur historique du crédit à la consommation au Maroc. Stratégie combinée génération de leads et gestion des réseaux sociaux qui a considérablement amplifié leur impact digital.',
        ],
        [
            'client'  => 'm-automotiv',
            'number'  => '02',
            'logo'    => 'CaseStudiesImages/AUTOMOTIV.svg',
            'bg'      => '#f9f4f4',
            'tag'     => 'Génération de leads',
            'name'    => 'M-Automotiv',
            'title'   => 'Augmenter les ventes grâce à la génération de leads',
            'excerpt' => 'Distributeur automobile avec un réseau de distribution moderne au Maroc. Nous avons bâti un dispositif de génération de leads haute performance pour maximiser les intentions d\'achat qualifiées.',
        ],
        [
            'client'  => 'agenz',
            'number'  => '03',
            'logo'    => 'CaseStudiesImages/agenz.svg',
            'bg'      => '#f4f9f9',
            'tag'     => 'Réseaux sociaux',
            'name'    => 'Agenz',
            'title'   => 'Booster la popularité grâce aux réseaux sociaux',
            'excerpt' => 'Plateforme immobilière innovante qui réinvente la vente et l\'achat au Maroc. Nous avons conçu et piloté une stratégie Social Media qui a transformé leur visibilité et multiplié leur communauté.',
        ],
        
        [
            'client'  => 'soge',
            'number'  => '04',
            'logo'    => 'CaseStudiesImages/file.svg',
            'bg'      => '#f9f8f4',
            'tag'     => 'Acquisition digitale',
            'name'    => 'SOGé',
            'title'   => 'Atteindre 100% des objectifs d\'ouverture de comptes',
            'excerpt' => 'Première banque 100% à distance au Maroc. Nous avons orchestré la campagne d\'acquisition digitale qui a permis d\'atteindre intégralement les objectifs d\'ouverture de comptes et de téléchargements d\'application.',
        ],
        [
            'client'  => 'swisslife',
            'number'  => '05',
            'logo'    => 'CaseStudiesImages/SwissLife.svg',
            'bg'      => '#f4f9f4',
            'tag'     => 'Leads & Automation',
            'name'    => 'SwissLife',
            'title'   => 'Générer des demandes de devis en ligne à grande échelle',
            'excerpt' => 'Acteur majeur de l\'assurance vie et santé prévoyance. Nous avons déployé une stratégie de génération de leads couplée à des scénarios d\'automation pour maximiser les demandes de devis qualifiées.',
        ],
    ];
@endphp

<section id="etudes-de-cas" class="atirao-cases" aria-labelledby="atirao-cases-title" data-atirao-reveal-section>

    <div class="atirao-cases__bg-glow" aria-hidden="true"></div>

    <div class="atirao-container">

        <div class="atirao-cases__heading">
            <div class="atirao-reveal" data-atirao-reveal>
                <div class="atirao-section-label atirao-section-label--red">
                    <span></span>
                    Nos études de cas
                </div>
                <h2 id="atirao-cases-title">
                    Des résultats
                    <span>qui parlent.</span>
                </h2>
            </div>
            <div class="atirao-cases__heading-right atirao-reveal" data-atirao-reveal>
                <p>Des défis concrets, des stratégies sur mesure et des résultats mesurables. Découvrez comment nous transformons les ambitions de nos clients en performances durables.</p>
                <a href="{{ route('caseStudie') }}" class="atirao-cases__all-link">
                    Voir toutes les études
                    <x-ui.icon name="ArrowRightIcon" :size="13" />
                </a>
            </div>
        </div>

        <div class="atirao-cases__carousel" data-atirao-cases>

            <div class="atirao-cases__stage" role="region" aria-label="Carrousel des études de cas" aria-live="polite">
                @foreach ($cases as $case)
                    <article
                        class="atirao-case-card {{ $loop->first ? 'is-active' : '' }}"
                        style="--card-bg: {{ $case['bg'] }}"
                        data-atirao-case="{{ $loop->index }}"
                        aria-hidden="{{ $loop->first ? 'false' : 'true' }}"
                        tabindex="{{ $loop->first ? '0' : '-1' }}"
                    >
                        <div class="atirao-case-card__watermark" aria-hidden="true">{{ $case['number'] }}</div>

                        <div class="atirao-case-card__top">
                            <div class="atirao-case-card__logo-box" style="background: {{ $case['bg'] }}">
                                <img src="{{ asset($case['logo']) }}" alt="Logo {{ $case['name'] }}" loading="lazy">
                            </div>
                            <div class="atirao-case-card__tag">
                                <span></span>
                                {{ $case['tag'] }}
                            </div>
                        </div>

                        <div class="atirao-case-card__body">
                            <h3>{{ $case['name'] }}</h3>
                            <p class="atirao-case-card__challenge">{{ $case['title'] }}</p>
                            <p class="atirao-case-card__excerpt">{{ $case['excerpt'] }}</p>
                        </div>

                        <div class="atirao-case-card__footer">
                            <hr class="atirao-case-card__sep">
                            <a href="{{ route('caseStudieShow', ['client' => $case['client']]) }}" class="atirao-case-card__cta" tabindex="{{ $loop->first ? '0' : '-1' }}">
                                <span>Voir l'étude de cas</span>
                                <x-ui.icon name="ArrowRightIcon" :size="12" />
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="atirao-cases__controls">
                <button class="atirao-cases__nav atirao-cases__nav--prev" data-atirao-cases-prev aria-label="Étude précédente">
                    <x-ui.icon name="ArrowLeftIcon" :size="18" />
                </button>

                <div class="atirao-cases__dots" role="tablist" aria-label="Navigation des études de cas">
                    @foreach ($cases as $case)
                        <button
                            class="atirao-cases__dot {{ $loop->first ? 'is-active' : '' }}"
                            role="tab"
                            aria-selected="{{ $loop->first ? 'true' : 'false' }}"
                            aria-label="{{ $case['name'] }}"
                            data-atirao-cases-dot="{{ $loop->index }}"
                        ></button>
                    @endforeach
                </div>

                <button class="atirao-cases__nav atirao-cases__nav--next" data-atirao-cases-next aria-label="Étude suivante">
                    <x-ui.icon name="ArrowRightIcon" :size="18" />
                </button>
            </div>

            <div class="atirao-cases__counter" aria-hidden="true">
                <span data-atirao-cases-current>01</span>
                <i></i>
                <span>{{ str_pad(count($cases), 2, '0', STR_PAD_LEFT) }}</span>
            </div>

        </div>
    </div>
</section>