@php
    // Item 1
    $commitmentItem1 = new stdClass();
    $commitmentItem1->title = str(__('La marque de volaille 100% Française'))->upper();
    $commitmentItem1->picture = 'resources/assets/images/commitments/commitment-1/preview-banner.jpg';
    $commitmentItem1->picture_alt = __('Drapeau français planté dans de la volaille crue.');
    $commitmentItem1->picture_title = __('Image de prévisualisation de la bannière de la page engagement n°1.');
    $commitmentItem1->link = route('fo.commitments.brand');
    // Item 2
    $commitmentItem2 = new stdClass();
    $commitmentItem2->title = str(__('élever durablement'))->upper();
    $commitmentItem2->picture = 'resources/assets/images/commitments/commitment-2/preview-banner.jpg';
    $commitmentItem2->picture_alt = __('Éleveur tenant une volaille dans ses mains.');
    $commitmentItem2->picture_title = __('Image de prévisualisation de la bannière de la page engagement n°2.');
    $commitmentItem2->link = route('fo.commitments.raise');
    // Item 3
    $commitmentItem3 = new stdClass();
    $commitmentItem3->title = str(__('bien nourrir tous les français'))->upper();
    $commitmentItem3->picture = 'resources/assets/images/commitments/commitment-3/preview-banner.jpg';
    $commitmentItem3->picture_alt = __('Assiette de volaille accompagnée de morceaux de courgette, tomate et citron.');
    $commitmentItem3->picture_title = __('Image de prévisualisation de la bannière de la page engagement n°3.');
    $commitmentItem3->link = route('fo.commitments.eat');
    // Item 4
    $commitmentItem4 = new stdClass();
    $commitmentItem4->title = str(__('favoriser le mieux vivre ensemble'))->upper();
    $commitmentItem4->picture = 'resources/assets/images/commitments/commitment-4/preview-banner.jpg';
    $commitmentItem4->picture_alt = __('Jeune équipe féminine d\'un sport collectif.');
    $commitmentItem4->picture_title = __('Image de prévisualisation de la bannière de la page engagement n°4.');
    $commitmentItem4->link = route('fo.commitments.life');
    // Item 5
    $commitmentItem5 = new stdClass();
    $commitmentItem5->title = str(__('respecter la terre'))->upper();
    $commitmentItem5->picture = 'resources/assets/images/commitments/commitment-5/preview-banner.jpg';
    $commitmentItem5->picture_alt = __('Forêt baignée par le soleil.');
    $commitmentItem5->picture_title = __('Image de prévisualisation de la bannière de la page engagement n°5.');
    $commitmentItem5->link = route('fo.commitments.respect');
    // All
    $collection = collect([$commitmentItem1, $commitmentItem2, $commitmentItem3, $commitmentItem4, $commitmentItem5])->forget(
        $commitmentId - 1,
    );
@endphp
<section class="position-relative line-border-large bg-white" id="commitments-other">
    <div class="container">
        <div class="row w-100 mx-auto py-5">
            <div class="col-12 col-xl-8 mx-auto text-center">
                <h3>{{ $title }}</h3>
                <p>{!! $text !!}</p>
            </div>
            <div class="col-12 position-relative mt-3">
                <div class="swiper swiper-cards-commitments px-md-4" id="swiper-cards-commitments">
                    <div class="swiper-wrapper w-fit">
                        @foreach ($collection as $item)
                            <div class="swiper-slide">
                                @include('fo.partials.breeding-card', [
                                    'picture' => [
                                        'src' => $item->picture,
                                        'alt' => $item->picture_alt,
                                        'title' => $item->picture_title,
                                    ],
                                    'title' => $item->title,
                                    'link' => $item->link,
                                ])
                            </div>
                        @endforeach
                    </div>
                </div>
                <button
                    class="swiper-button swiper-button-prev-custom swiper-cards-commitments-button-prev d-flex justify-content-center align-items-center position-absolute top-50 z-1 rounded-pill border-0 bg-white">
                    <img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
                        title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
                </button>
                <button
                    class="swiper-button swiper-button-next-custom swiper-cards-commitments-button-next d-flex justify-content-center align-items-center position-absolute top-50 z-1 rounded-pill border-0 bg-white">
                    <img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
                        title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
                </button>
            </div>
        </div>
    </div>
</section>