@extends('fo.layout')

@section('title', $staticPageModel->seo_title)
@section('description', $staticPageModel->seo_description)
@section('breadcrumb', request()->route()->getName())

@section('banner')
    @include('fo.layouts.banner', [
        'h1' => __($staticPageModel->title),
        'asset' => asset($staticPageModel->picture),
        'title' => __($staticPageModel->picture_title),
        'alt' => __($staticPageModel->picture_alt),
        'displayArrow' => true,
        'buttonLink' => '#introduction',
    ])
@endsection

@section('content')
    <section class="commit">
        @if ($navLinks->count())
            <div class="sticky-navigation">
                <div class="sticky-navigation-wrapper show row m-0 p-0">
                    @foreach ($navLinks as $link)
                        <div class="col-6 col-md-12 py-md-1 p-2">
                            <div class="rounded-5 bg-{{ $link->color->name }}-light shadow-sm">
                                <a class="d-flex justify-content-center align-items-center text-primary text-decoration-none p-sm-3 p-2"
                                    data-bs-toggle="tooltip" href="#{{ $link->anchor }}"
                                    title="{{ __('Accéder à la partie :name de la page', ['name' => $link->title]) }}">
                                    <span class="badge rounded-pill bg-{{ $link->color->name }} d-block me-2"></span>
                                    <small>{{ $link->title }}</small>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                <button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
                    title="{{ __('Afficher/Masquer le menu des ancres') }}">
                    <i class="fa-solid fa-plus d-none"></i>
                    <i class="fa-solid fa-minus"></i>
                </button>
            </div>
        @endif
        {{-- AMBITION --}}
        <section class="ambition anchor-padding container my-4" id="introduction">
            <span id="sticky-displayer"></span>
            <div class="row mt-3">
                <div class="col-12">
                    <h2 class="h2 fw-bold text-primary text-center">{{ $ambitionSection->h2_title }}</h2>
                    @if ($ambitionSection->text)
                        <div class="ck-content text-primary">
                            {!! clean($ambitionSection->text) !!}
                        </div>
                    @endif
                </div>
            </div>
        </section>
        {{-- BREEDING --}}
        <section class="breeding border-top-curved-tertiary anchor-padding mt-4" id="breeding">
            <div class="text-bg-tertiary">
                <div class="breeding-wrapper position-relative container">
                    <div class="row text-center">
                        <div class="col-12 col-lg-8 mx-lg-auto">
                            <h2 class="h2 fw-bold">{{ $breedingSection->h2_title }}</h2>
                            @if ($breedingSection->text)
                                <div class="ck-content w-100 w-md-75 mx-auto">
                                    {!! clean($breedingSection->text) !!}
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-6 col-md-8 mx-md-auto">
                            @include('fo.partials.key-number', [
                                'color' => 'tertiary',
                                'value' => sprintf('%d%%', $breedingSection->data['bloc_key_nombre']['value']),
                                'text' => clean($breedingSection->data['bloc_text_accompagnant_le_nombre_content']['value']),
                                'wysiwyg' => true,
                                'position' => 'top',
                            ])
                        </div>
                        <div
                            class="col-6 col-md-8 mx-md-auto d-flex flex-column justify-content-center text-md-center overflow-hidden text-start">
                            {!! clean($breedingSection->data['bloc_images_content']['value']) !!}
                            @if ($breedingSection->data['bloc_button_on_temoigne_engagements']['value'])
                                <a class="btn btn-primary rounded-pill mx-md-auto w-fit"
                                    href="{{ route('fo.hire.show') }}#we-testimonials">{{ __('On témoigne') }}</a>
                            @endif
                        </div>
                    </div>
                    <div class="breeding-image row position-absolute start-50 translate-middle-x">
                        <div class="col-12 mt-4 text-center">
                            <img src="{{ Vite::asset('resources/assets/images/commitments/breeding.png') }}"
                                title="{{ __('Illustration de l\'engagement \'Elever durablement\'') }}"
                                alt="{{ __('Illustration représentant un éleveur et ses volailles') }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-bottom-curved-tertiary w-100"></div>
            <div class="breeding-light bg-tertiary-light">
                <div class="container">
                    <div class="row flex-column align-items-center justify-content-center">
                        <div class="col-12">
                            <h2 class="h2 fw-bold text-primary text-center">{{ __('Faîtes vous votre avis vous-même') }}</h2>
                        </div>
                        <div class="col-12 col-sm-4 col-lg-3">
                            <a href="https://www.youtube.com/channel/UCiOgBdc7eaU5vp4VPEk4s8w" target="_blank">
                                <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/others/logo_nature_eleveurs.svg') }}"
                                    alt="{{ __('Logo Nature d\'éleveurs') }}">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- LIFE --}}
        <section class="life border-top-curved-upper-tertiary-light anchor-padding mb-4 overflow-hidden" id="life">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-8 mx-auto mb-3">
                        <div class="d-flex flex-column align-items-center">
                            <h2 class="h2 fw-bold text-quad text-center">{{ $lifeSection->h2_title }}</h2>
                            <img class="w-fit" src="{{ Vite::asset('resources/assets/images/commitments/life.png') }}"
                                title="{{ __('Illustration de l\'engagement \'Mieux vivre\'') }}"
                                alt="{{ __('Illustration représentant la communacation dasn un groupe') }}">
                        </div>
                    </div>
                </div>
                <div class="row justify-content-md-between align-items-center">
                    <div class="col-12 col-md-8 py-md-0 mx-auto pb-3">
                        @if ($lifeSection->text)
                            <div class="ck-content text-primary">
                                {!! clean($lifeSection->text) !!}
                            </div>
                        @endif
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="mx-sm-0 ms-sm-auto mx-auto w-fit">
                            @include('fo.partials.key-number', [
                                'color' => 'quad',
                                'value' => sprintf('%d%%', $lifeSection->data['bloc_key_nombre_n1']['value']),
                                'text' => clean($lifeSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
                                'wysiwyg' => true,
                                'position' => 'top',
                            ])
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="mx-sm-0 me-sm-auto mx-auto w-fit">
                            @include('fo.partials.key-number', [
                                'color' => 'quad',
                                'value' => sprintf('%d%%', $lifeSection->data['bloc_key_nombre_n2']['value']),
                                'text' => clean($lifeSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
                                'wysiwyg' => true,
                                'position' => 'top',
                            ])
                        </div>
                    </div>
                </div>
                @if ($lifeSection->data['bloc_button_on_temoigne_engagements']['value'])
                    <div class="col-12 my-3 text-center">
                        <a class="btn btn-primary rounded-pill" data-bs-toggle="tooltip" href="#testimonials"
                            title="{{ __('Accéder à la partie des témoignages') }}">{{ __('On témoigne') }}</a>
                    </div>
                @endif
                <div class="col-12">
                    <div class="ck-content text-primary">
                        {!! clean($lifeSection->data['bloc_numero2_content']['value']) !!}
                    </div>
                </div>
                <div class="col-12 position-relative mb-5">
                    <div class="swiper swiper-commitments-life mt-lg-0 mt-5 overflow-visible" id="swiper-commitments-life">
                        <div class="swiper-wrapper">
                            @foreach ($slideLifeModels as $slide)
                                <div class="swiper-slide">
                                    <div class="card bg-nine rounded-3 text-quad w-fit border-0 p-2">
                                        <div class="card-body p-0">
                                            <img class="img-fluid" src="{{ asset($slide->picture) }}" title="{{ $slide->picture_title }}"
                                                alt="{{ $slide->picture_alt }}">
                                        </div>
                                        <div class="card-footer bg-transparent">
                                            <p class="m-0 text-center">{{ $slide->title }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <button class="swiper-button swiper-button-prev-custom swiper-commitments-life-button-prev z-1 mx-3">
                        <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                            title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
                    </button>
                    <button class="swiper-button swiper-button-next-custom swiper-commitments-life-button-next z-1 mx-3">
                        <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                            title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
                    </button>
                </div>
                @if ($lifeSection->data['bloc_button_on_bouge']['value'])
                    <div class="col-12 text-center">
                        <a class="btn btn-primary rounded-pill" data-bs-toggle="tooltip" href="{{ route('fo.news.index') }}"
                            title="{{ __('Accéder à la page On bouge ensemble') }}">{{ __('On bouge ensemble') }}</a>
                    </div>
                @endif
            </div>
        </section>
        {{-- EARTH --}}
        <section class="earth border-top-curved-quint anchor-padding mt-4" id="earth">
            <div class="position-relative text-bg-quint">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-md-8 mx-auto">
                            <h2 class="h2 fw-bold text-center">{{ $earthSection->h2_title }}</h2>
                        </div>
                    </div>
                    <div class="row justify-content-md-between align-items-center">
                        <div class="col-12 col-md-8 py-md-0 mx-auto pb-3">
                            @if ($earthSection->text)
                                <div class="ck-content">
                                    {!! clean($earthSection->text) !!}
                                </div>
                            @endif
                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="mx-sm-0 ms-sm-auto mx-auto w-fit">
                                @include('fo.partials.key-number', [
                                    'color' => 'quint',
                                    'value' => sprintf('%d%%', $earthSection->data['bloc_key_nombre_n1']['value']),
                                    'text' => clean($earthSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
                                    'wysiwyg' => true,
                                    'position' => 'top',
                                ])
                            </div>
                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="mx-sm-0 me-sm-auto mx-auto w-fit">
                                @include('fo.partials.key-number', [
                                    'color' => 'quint',
                                    'value' => sprintf('%d%%', $earthSection->data['bloc_key_nombre_n2']['value']),
                                    'text' => clean($earthSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
                                    'wysiwyg' => true,
                                    'position' => 'top',
                                ])
                            </div>
                        </div>
                    </div>
                    @if ($earthSection->data['bloc_button_on_temoigne_engagements']['value'])
                        <div class="row pt-4">
                            <div class="col-12 text-center">
                                <a class="btn btn-primary rounded-pill"
                                    href="{{ route('fo.hire.show') }}#we-testimonials">{{ __('On témoigne') }}</a>
                            </div>
                        </div>
                    @endif
                    <div class="earth-image row position-absolute start-50 translate-middle-x pt-4">
                        <div class="col-12">
                            <img src="{{ Vite::asset('resources/assets/images/commitments/earth.png') }}"
                                title="{{ __('Illustration de l\'engagement \'Respecter la terre\'') }}"
                                alt="{{ __('Illustration représentant la nature avec des arbres et des champs') }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="earth-light border-top-concave-quint bg-quint-light overflow-hidden pb-5">
                <div class="container mt-5">
                    <div class="row justify-content-center">
                        <div class="col-12 position-relative mb-5">
                            <div class="swiper swiper-commitments-earth mt-lg-0 mt-5 overflow-visible" id="swiper-commitments-earth">
                                <div class="swiper-wrapper">
                                    @foreach ($slideEarthModels as $slide)
                                        <div class="swiper-slide">
                                            <div class="card bg-quint rounded-3 w-fit border-0 p-2 text-white">
                                                <div class="card-body p-0">
                                                    <img class="img-fluid" src="{{ asset($slide->picture) }}"
                                                        title="{{ $slide->picture_title }}" alt="{{ $slide->picture_alt }}">
                                                </div>
                                                <div class="card-footer bg-transparent">
                                                    <p class="m-0 text-center">{{ $slide->title }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <button class="swiper-button swiper-button-prev-custom swiper-commitments-earth-button-prev z-1 mx-3">
                                <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                    title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
                            </button>
                            <button class="swiper-button swiper-button-next-custom swiper-commitments-earth-button-next z-1 mx-3">
                                <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                    title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
                            </button>
                        </div>
                        <div class="col-12 col-md-6 mt-md-0 mt-5">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-3">
                                            <img class="w-100" src="{{ asset($earthSection->data['bloc_image']['value']) }}"
                                                title="{{ $earthSection->data['bloc_image']['title'] }}"
                                                alt="{{ $earthSection->data['bloc_image']['alt'] }}">
                                        </div>
                                        <div class="col-9">
                                            <div class="ck-content text-quint">
                                                {!! clean($earthSection->data['bloc_numero2_content']['value']) !!}
                                            </div>
                                            <div class="text-start">
                                                <a class="btn btn-primary rounded-pill mb-0 mb-3 mt-3 text-inherit"
                                                    href="{{ $earthSection->data['bloc_link']['value'] }}"
                                                    target="_blank">{{ __('En savoir plus sur BREEAM') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- FEED --}}
        <section class="feed anchor-padding mb-4" id="feed">
            <div class="border-top-curved-white bg-quint-light"></div>
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-8 mx-auto">
                        <div class="d-flex flex-column align-items-center">
                            <h2 class="h2 fw-bold text-sixt text-center">{{ $feedSection->h2_title }}</h2>
                            <img class="my-3" src="{{ Vite::asset('resources/assets/images/commitments/feed.png') }}"
                                title="{{ __('Illustration de l\'engagement \'Bien nourrir\'') }}"
                                alt="{{ __('Illustration d\'une femme et d\'un enfant mangeant un délicieux repas') }}">
                        </div>
                    </div>
                </div>
                <div class="row justify-content-md-between align-items-center">
                    <div class="col-12 col-md-8 py-md-0 mx-auto pb-3">
                        @if ($feedSection->text)
                            <div class="ck-content text-primary">
                                {!! clean($feedSection->text) !!}
                            </div>
                        @endif
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="mx-sm-0 ms-sm-auto mx-auto w-fit">
                            @include('fo.partials.key-number', [
                                'color' => 'sixt',
                                'value' => sprintf('%d%%', $feedSection->data['bloc_key_nombre_n1']['value']),
                                'text' => clean($feedSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
                                'wysiwyg' => true,
                                'position' => 'top',
                            ])
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="mx-sm-0 me-sm-auto mx-auto w-fit">
                            @include('fo.partials.key-number', [
                                'color' => 'sixt',
                                'value' => sprintf('%d%%', $feedSection->data['bloc_key_nombre_n2']['value']),
                                'text' => clean($feedSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
                                'wysiwyg' => true,
                                'position' => 'top',
                            ])
                        </div>
                    </div>
                </div>
                @if ($feedSection->data['bloc_button_on_temoigne_engagements']['value'])
                    <div class="row mb-4 mt-3">
                        <div class="col-12 d-flex justify-content-center">
                            <a class="btn btn-primary rounded-pill"
                                href="{{ route('fo.hire.show') }}#we-testimonials">{{ __('On témoigne') }}</a>
                        </div>
                    </div>
                @endif
                <div class="row">
                    <div class="col-12 col-md-8 mx-auto">
                        <div class="ck-content text-primary">
                            {!! clean($feedSection->data['bloc_numero2_content']['value']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-8 mx-auto">
                        <div class="ck-content text-primary">
                            {!! clean($feedSection->data['bloc_numero3_content']['value']) !!}
                        </div>
                    </div>
                </div>
                @if ($feedSection->data['bloc_button_on_produit']['value'])
                    <div class="row">
                        <div class="col-12 d-flex justify-content-center mt-3">
                            <a class="btn btn-primary rounded-pill" href="{{ route('fo.produce.show') }}">{{ __('On produit') }}</a>
                        </div>
                    </div>
                @endif
            </div>
        </section>
        {{-- TESTIMONIALS --}}
        <section class="border-top-curved-tertiary-light testimonials anchor-padding mt-4" id="testimonials">
            <div class="bg-primary-light">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <h2 class="h2 fw-bold text-primary text-center">{{ $testimonialsSection->h2_title }}</h2>
                            <h3 class="fs-5 fw-semibold text-primary mb-3">
                                {{ $testimonialsSection->data['bloc_string_titre_h3_de_la_section_numero1']['value'] }}
                            </h3>
                        </div>
                    </div>
                </div>
                {{-- SLIDER TESTIMONIALS --}}
                <div class="position-relative testimonials-content mask-white-right overflow-hidden">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-12 position-relative mb-5">
                                <div class="swiper swiper-commitments-testimonials mt-lg-0 mt-5 h-fit overflow-visible"
                                    id="swiper-commitments-testimonials">
                                    <div class="swiper-wrapper h-fit">
                                        @foreach ($testimonialModels as $testimonial)
                                            <div class="swiper-slide h-auto">
                                                @include('fo.partials.testimonials.card', [
                                                    'picture' => [
                                                        'path' => $testimonial->picture,
                                                        'alt' => $testimonial->picture_alt,
                                                        'title' => $testimonial->picture_title,
                                                    ],
                                                    'job' => $testimonial->job,
                                                    'name' => $testimonial->name,
                                                    'speach' => $testimonial->content,
                                                    'bgClass' => 'bg-' . $testimonial->type->color(),
                                                    'jobClass' => 'text-white',
                                                    'nameClass' => 'text-white',
                                                    'speachClass' => 'text-white',
                                                ])
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <button class="swiper-button swiper-button-prev-custom swiper-commitments-testimonials-button-prev z-1 mx-3">
                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                        title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
                                </button>
                                <button class="swiper-button swiper-button-next-custom swiper-commitments-testimonials-button-next z-1 mx-3">
                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                        title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row mb-4">
                        <div class="col-12">
                            <h3 class="fs-5 fw-semibold text-primary my-3 text-center">
                                {{ $testimonialsSection->data['bloc_string_titre_h3_de_la_section_numero2']['value'] }}
                            </h3>
                            @if ($testimonialsSection->text)
                                <div class="ck-content text-primary">
                                    {!! clean($testimonialsSection->text) !!}
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="row flex-column align-items-center justify-content-center">
                        <div class="col-8 mb-4 text-center">
                            <a href="https://www.ldc.fr" target="_blank">
                                <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/others/logo_ldc.png') }}"
                                    title="{{ __('Accédez au site www.ldc.fr') }}" alt="{{ __('Logo LDC') }}">
                            </a>
                        </div>
                        <div class="col d-flex flex-column justify-content-center mx-auto mb-4 overflow-hidden text-center">
                            <a class="btn btn-white rounded-pill mx-auto w-fit" href="{{ $testimonialsSection->data['bloc_link']['value'] }}"
                                @if ($testimonialsSection->data['bloc_link_new_tab']['value']) target="_blank" @endif>{{ __('Lire le rapport') }}</a>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </section>
@endsection