@extends('layouts.default')

@section('content')
    <style>
        /* hiding all bullets by default */
        .slick-dots li {
            display: none
        }

        /* only displaying the active bullets and the 2 bullets next to it */
        .slick-dots li.slick-active,
        .slick-dots li.slick-active + li,
        .slick-dots li.slick-active + li + li {
            display: inline-block;
        }

        /* displaying the last three bullets when slick-active class isn't applied to any li before them  */
        .slick-dots li:nth-last-child(1),
        .slick-dots li:nth-last-child(2),
        .slick-dots li:nth-last-child(3) {
            display: inline-block;
        }

        /* hiding the last three bullets if slick-active exist before them */
        .slick-dots li.slick-active ~ li:nth-last-child(1),
        .slick-dots li.slick-active ~ li:nth-last-child(2),
        .slick-dots li.slick-active ~ li:nth-last-child(3) {
            display: inline-block;
        }

        /* specific conditions to always display the last three bullets */
        .slick-dots li.slick-active + li + li:nth-last-child(3),
        .slick-dots li.slick-active + li + li:nth-last-child(2),
        .slick-dots li.slick-active + li + li:nth-last-child(1),
        .slick-dots li.slick-active + li:nth-last-child(3),
        .slick-dots li.slick-active + li:nth-last-child(2),
        .slick-dots li.slick-active + li:nth-last-child(1) {
            display: inline-block;
        }
    </style>
    <div class="th-hero-wrapper hero-6" id="hero">
        <div class="hero-slider-6 th-carousel" id="heroSlide6" data-slide-show="1" data-md-slide-show="1"
             data-fade="true">
            <div class="th-hero-slide">
                <div class="th-hero-bg"></div>

                <div class="container">
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="hero-style6">
                                <h1 class="hero-title" data-ani="slideindown" data-ani-delay="0.4s">Votre sécurité,</h1>
                                <h1 class="hero-title" data-ani="slideindown" data-ani-delay="0.1s">notre priorité.</h1>
                                <p class="hero-text" data-ani="slideinup" data-ani-delay="0.3s">Experts en protection
                                    privée {{ isset($cityName) ? 'à ' . ucfirst($cityName) : '' }} : la référence
                                    partout en France.</p>
                                <div class="btn-group" data-ani="slideinup" data-ani-delay="0.5s">
                                    <a href="{{ route('services') }}" class="th-btn style6">Nos services<i
                                            class="fas fa-long-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hero-6-thumb">
                    <img src="{{ asset('img/home-slider.png') }}" alt="img">
                </div>
            </div>


        </div>
    </div>
    <div class="overflow-hidden space">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-xl-7">
                    <div class="about-card_img me-xl-5 me-0">
                        <img class="tilt-active" src="{{ asset('img/about-home-1.png') }}" alt="About">
                    </div>
                </div>

                <div class="col-xl-5">
                    <div class="title-area mb-30">
                        <h2 class="sec-title">JLP Sécurité<br/></h2>
                        <h3 class="sec-title">agence
                            privée {{ isset($cityName) ? 'à ' . ucfirst($cityName) : 'en Rhône-Alpes et toute la France' }}</h3>
                    </div>
                    <p class="mt-n1 mb-30">
                        Depuis plus de {{ (date('Y') - 2022) }} ans, JLP Sécurité met son expertise en sécurité au service des particuliers et
                        des professionnels {{ isset($cityName) ? 'à ' . ucfirst($cityName) . ' et' : '' }} dans toute la
                        région Rhône-Alpes. Basée à Villefontaine, notre entreprise spécialisée dans le gardiennage, la
                        protection événementielle et la surveillance propose des solutions de sécurité sur mesure
                        adaptées à vos besoins. Nous intervenons dans toute la région Rhône-Alpes et au-delà, offrant
                        des services de sécurisation de sites, de protection des biens, ainsi que des interventions
                        rapides 24/7.<br/><br/>

                        Notre équipe d’agents qualifiés assure votre tranquillité en garantissant des services de
                        sécurisation pour tous types d’environnements : magasins, commerces, sites industriels et
                        résidences.

                        Faites confiance à JLP Sécurité, votre partenaire en sécurité privée dans toute la France.
                    </p>
                    <div class="row gx-30 align-items-center">
                        <div class="col-sm-auto">
                            <div class="checklist">
                                <ul>
                                    <li><i class="fa fa-check-circle"></i> Expert en sécurité privée</li>
                                    <li><i class="fa fa-check-circle"></i> Présence forte dans toute la région
                                        Rhône-Alpes
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="service-sec5 bg-title space-bottom">
        <div class="position-relative space-top">
            <div class="service-sec5-img img-half img-right z-index-step1">
                <img src="{{ asset('img/home-services.png') }}" style="border-radius: 50px" alt="img">
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-6">
                        <div class="title-area text-xl-start text-center">
                            <h2 class="sec-title text-white">Découvrez nos services</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-8 position-relative">
                        <div class="row g-0 service-wrap-5">
                            <div class="col-md-6 service-grid style3">
                                <div class="icon">
                                    <img style="width: 70px"
                                         src="{{ asset('img/icons/services/jlp-securite-gardiennage-de-sites-et-de-locaux.svg') }}"
                                         alt="Gardiennage de sites et de locaux {{ isset($cityName) ? 'à ' . ucfirst($cityName) . ' et' : '' }} Rhône-Alpes - JLP Sécurité">
                                </div>
                                <div class="service-grid_content">
                                    <h3 class="service-grid_title h4"><a
                                            href="{{ route('services.gardiennage-et-surveillance') }}">Gardiennage
                                            de
                                            sites et de locaux</a>
                                    </h3>
                                    <p class="service-grid_text">Protégez vos biens avec nos services de gardiennage
                                        24h/24 pour bâtiments et entreprises.</p>
                                    <a href="{{ route('services.gardiennage-et-surveillance') }}" class="half-line-btn"
                                       tabindex="0">En savoir plus</a>
                                </div>
                            </div>
                            <div class="col-md-6 service-grid style3">
                                <div class="icon">
                                    <img style="width: 70px"
                                         src="{{ asset('img/icons/services/jlp-securite-securite-evenementielle.svg') }}"
                                         alt="Sécurité événementielle {{ isset($cityName) ? 'à ' . ucfirst($cityName) . ' et' : '' }} Rhône-Alpes - JLP Sécurité">
                                </div>
                                <div class="service-grid_content">
                                    <h3 class="service-grid_title h4"><a
                                            href="{{ route('services.securite-evenementielle') }}">Sécurité
                                            événementielle</a>
                                    </h3>
                                    <p class="service-grid_text">Assurez la sécurité de vos événements avec des experts
                                        en contrôle des accès et gestion de la sécurité.</p>
                                    <a href="{{ route('services.securite-evenementielle') }}" class="half-line-btn"
                                       tabindex="0">En savoir plus</a>
                                </div>
                            </div>
                            <div class="col-md-6 service-grid style3">
                                <div class="icon">
                                    <img style="width: 70px"
                                         src="{{ asset('img/icons/services/jlp-securite-surveillance-mobile-et-ronde-de-securite.svg') }}"
                                         alt="Surveillance mobile et
                                    ronde de sécurité {{ isset($cityName) ? 'à ' . ucfirst($cityName) . ' et' : '' }} Rhône-Alpes - JLP Sécurité">
                                </div>
                                <div class="service-grid_content">
                                    <h3 class="service-grid_title h4"><a
                                            href="{{ route('services.surveillance-mobile-et-ronde-de-securite') }}">Surveillance
                                            mobile
                                            et ronde de sécurité</a></h3>
                                    <p class="service-grid_text">Profitez de surveillance mobile et de rondes de
                                        sécurité pour protéger vos sites sensibles.</p>
                                    <a href="{{ route('services.surveillance-mobile-et-ronde-de-securite') }}"
                                       class="half-line-btn" tabindex="0">En savoir plus</a>
                                </div>
                            </div>
                            <div class="col-md-6 service-grid style3">
                                <div class="icon">
                                    <img style="width: 70px"
                                         src="{{ asset('img/icons/services/jlp-securite-agents-de-securite-en-commerce.svg') }}"
                                         alt="Agents de sécurité de magasin {{ isset($cityName) ? 'à ' . ucfirst($cityName) . ' et' : '' }} Rhône-Alpes - JLP Sécurité">
                                </div>
                                <div class="service-grid_content">
                                    <h3 class="service-grid_title h4"><a
                                            href="{{ route('services.agents-de-securite-de-magasin') }}">Agents de
                                            sécurité de magasin</a></h3>
                                    <p class="service-grid_text">Agents dédiés pour sécuriser vos magasins et
                                        boutiques.</p>
                                    <a href="{{ route('services.agents-de-securite-de-magasin') }}"
                                       class="half-line-btn"
                                       tabindex="0">En savoir plus</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="service-sec space-bottom space">
        <div class="container">
            <div class="row justify-content-center service-slider2 th-carousel" data-slide-show="3"
                 data-lg-slide-show="3" data-md-slide-show="2" data-sm-slide-show="1" data-arrows="true">
                <div class="col-lg-4 col-md-6">
                    <div class="service-grid style4">
                        <div class="service-box_icon">
                            <div class="global-icon">
                                <img src="{{ asset('img/icons/icon-1.svg') }}"
                                     alt="JLP Sécurité - Fiabilité et réactivité">
                            </div>
                        </div>
                        <div class="service-grid_content">
                            <h3 class="service-title h5">Fiabilité et réactivité</h3>
                            <p class="service-grid_text">Une service rapide et efficace pour répondre à vos besoins.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="service-grid style4">
                        <div class="service-box_icon">
                            <div class="global-icon">
                                <img src="{{ asset('img/icons/icon-2.svg') }}" alt="JLP Sécurité - Professionnalisme">
                            </div>
                        </div>
                        <div class="service-grid_content">
                            <h3 class="service-title h5">Professionnalisme</h3>
                            <p class="service-grid_text">Nos agents de sécurité sont qualifiés, expérimentés et agréés
                                par le CNAPS.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="service-grid style4">
                        <div class="service-box_icon">
                            <div class="global-icon">
                                <img src="{{ asset('img/icons/icon-3.svg') }}" alt="JLP Sécurité - Adaptabilité">
                            </div>
                        </div>
                        <div class="service-grid_content">
                            <h3 class="service-title h5">Adaptabilité</h3>
                            <p class="service-grid_text">Des solutions sur mesure pour chaque situation.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="testimonial-sec3">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 order-lg-2">
                    <div class="thumb mb-lg-0 mb-5">
                        <img class="w-100" src="{{ asset('img/ils-nous-font-confiance.png') }}" alt="img">
                    </div>
                </div>
                <div class="col-lg-5 order-lg-1">
                    <div class="title-area">
                        <h2 class="sec-title">Des résultats qui parlent d’eux-mêmes </h2>
                        <a href="{{ route('feedback') }}" class="th-btn mb-0">Déposer un avis <i
                                class="fa fa-arrow-right"></i></a>
                    </div>
                    <div class="th-carousel testi-slider3" data-slide-show="1" data-dots="true" data-xl-dots="true"
                         data-ml-dots="true">

                        @foreach($feedbacks as $feedback)
                            <div class="testi-box3">
                                <div class="testi-box_avater">
                                    <div class="thumb">
                                        @if($feedback->img)
                                            <img src="{{ "/s/" . ($feedback->img) }}" width="100px"
                                                 alt="{{ $feedback->name }} - {{ $feedback->company }} - JLP Sécurité">
                                        @else
                                            <img src="{{ asset('img/webapp.png') }}" width="100px"
                                                 alt="{{ $feedback->name }} - {{ $feedback->company }} - JLP Sécurité">
                                        @endif
                                        <div class="testi-box_quote">
                                            <i class="fa fa-quote-right"></i>
                                        </div>
                                    </div>
                                    <div class="details">
                                        <h3 class="testi-box_name h4">{{ $feedback->name }}</h3>
                                        @if($feedback)
                                            <span class="testi-box_desig">{{ $feedback->company }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="testi-content_content">
                                    <p class="testi-box_text">{{ $feedback->message }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>

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

    <section class="brand-sec1 space-bottom">
        <div class="container">
            <div class="row th-carousel" data-slide-show="7" data-lg-slide-show="6" data-md-slide-show="5"
                 data-sm-slide-show="4" data-xs-slide-show="3">
                @foreach ($partners as $partner)
                    <div class="col-auto">
                        <div class="brand-box">
                            <a @if($partner->url) target="_blank" href="{{ $partner->url }}" @endif>
                                <img src="{{ ('/s/'.$partner->img) }}" alt="{{ $partner->name }}">
                            </a>
                        </div>
                    </div>
                @endforeach

            </div><br/>

            <center>
                <a href="{{ route('customers') }}" style="margin: auto" class="th-btn mb-0">Voir tous les clients <i
                        class="fa fa-arrow-right"></i></a>
            </center>
        </div>
    </section>
@endsection