@extends('cortexclean.layouts.main')
@extends('cortexclean.layouts.header')
@extends('cortexclean.layouts.footer')

@section('content')

<h1 style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">{{ __('home.h1') }}</h1>

<section class="main-slider main-slider-two">
    <div class="swiper-container thm-swiper__slider"
        data-swiper-options='{"slidesPerView": 1, "loop": true,
                "effect": "fade",
                "pagination": {
                "el": "#main-slider-pagination",
                "type": "bullets",
                "clickable": true
                },
                "navigation": {
                "nextEl": "#main-slider__swiper-button-next",
                "prevEl": "#main-slider__swiper-button-prev"
                },
                "autoplay": {
                "delay": 7000
                }}'>
        <div class="swiper-wrapper">

            <!--Start Main Slider One-->
            <div class="swiper-slide">
                <div class="image-layer" style="background-image:url(/images/backgrounds/home1.png)">
                </div>
                <div class="main-slider-two__bg"></div>
                <div class="main-slider-two__img"><img src="{{ asset('/images/slides/window-clean.png') }}" alt="{{ __('home.slider.slide1.img_alt') }}" width="2000" height="2000">
                </div>
                <div class="shape1"></div>
                <div class="shape2 float-bob-y"></div>
                <div class="shape3"><img src="{{ asset('/images/shapes/main-slider-v2-shape2.png') }}" alt="" width="527" height="840">
                </div>
                <div class="container">
                    <div class="main-slider-two__content">
                        <div class="main-slider-two__list">
                            <ul>
                                @foreach(__('home.slider.slide1.list') as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="title">
                            <h2>{!! __('home.slider.slide1.title') !!}</h2>
                        </div>

                        <div class="btn-box">
                            <a class="thm-btn"
                                href="https://outlook.office.com/book/CORTEXCLEAN@cortexfacility.com/"
                                target="_blank">
                                <span class="txt">{{ __('home.slider.cta') }}</span>
                                <i class="icon-double-chevron"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Main Slider One-->

            <!--Start Main Slider One-->
            <div class="swiper-slide">
                <div class="image-layer" style="background-image:url(/images/backgrounds/home2.png)">
                </div>
                <div class="main-slider-two__bg"></div>
                <div class="main-slider-two__img"><img src="{{ asset('/images/slides/cleaning.png') }}" alt="{{ __('home.slider.slide2.img_alt') }}" width="2000" height="2000">
                </div>
                <div class="shape1"></div>
                <div class="shape2 float-bob-y"></div>
                <div class="shape3"><img src="{{ asset('/images/shapes/main-slider-v2-shape2.png') }}" alt="" width="527" height="840">
                </div>
                <div class="container">
                    <div class="main-slider-two__content">
                        <div class="main-slider-two__list">
                            <ul>
                                @foreach(__('home.slider.slide2.list') as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="title">
                            <h2>{!! __('home.slider.slide2.title') !!}</h2>
                        </div>

                        <div class="btn-box">
                            <a class="thm-btn"
                                href="https://outlook.office.com/book/CORTEXCLEAN@cortexfacility.com/"
                                target="_blank">
                                <span class="txt">{{ __('home.slider.cta') }}</span>
                                <i class="icon-double-chevron"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Main Slider One-->

            <!--Start Main Slider One-->
            <div class="swiper-slide">
                <div class="image-layer" style="background-image:url(/images/backgrounds/home4.png)">
                </div>
                <div class="main-slider-two__bg"></div>
                <div class="main-slider-two__img">
                    <img src="{{ asset('/images/slides/call-center.png') }}" alt="{{ __('home.slider.slide3.img_alt') }}" width="2000" height="2000">
                </div>
                <div class="shape1"></div>
                <div class="shape2 float-bob-y"></div>
                <div class="shape3">
                    <img src="{{ asset('/images/shapes/main-slider-v2-shape2.png') }}" alt="" width="527" height="840">
                </div>
                <div class="container">
                    <div class="main-slider-two__content">
                        <div class="main-slider-two__list">
                            <ul>
                                @foreach(__('home.slider.slide3.list') as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="title">
                            <h2>{{ __('home.slider.slide3.title_line1') }} </h2>
                            <h2>{{ __('home.slider.slide3.title_line2') }} </h2>
                            <h2>{{ __('home.slider.slide3.title_line3') }}</h2>
                        </div>

                        <div class="btn-box">
                            <a class="thm-btn"
                                href="https://outlook.office.com/book/CORTEXCLEAN@cortexfacility.com/"
                                target="_blank">
                                <span class="txt">{{ __('home.slider.cta') }}</span>
                                <i class="icon-double-chevron"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Main Slider One-->

        </div>

        <!-- If we need navigation buttons -->
        <div class="main-slider__nav style2">
            <div class="swiper-button-prev" id="main-slider__swiper-button-next">
                <i class="icon-left-arrow"></i>
            </div>
            <div class="swiper-button-next" id="main-slider__swiper-button-prev">
                <i class="icon-right-arrow"></i>
            </div>
        </div>

    </div>
</section>

<section class="feature-four">
    <div class="auto-container">
        <div class="feature-four__inner">

            <div class="feature-four__bg" style="background-image: url(/images/backgrounds/home-banner-blue.png);">
            </div>

            <div class="container">
                <div class="sec-title-two">
                    <div class="sub-title">
                        <h3 class="text-white">{{ __('home.services_section.sub_title') }}</h3>
                        <div class="round-two text-white"></div>
                    </div>
                    <h2 class="text-white">{{ __('home.services_section.title') }}</h2>
                </div>

                <div class="row">
                    <div class="col-12 col-xl-10">
                        <div class="services-two__left-content">

                            {{-- Carte principale : Nettoyage professionnel --}}
                            <div class="row filter-layout masonary-layout">
                                <div class="col-xl-12 col-lg-12 col-md-12 wow animated fadeInUp" data-wow-delay="0.1s">
                                    <div class="services-two__left-content-single text-center">
                                        <div class="icon-box">
                                            <img class="cortex-icon" src="{{ asset('/images/icon/brosse.svg') }}" alt="" width="48" height="48" loading="lazy">
                                        </div>
                                        <div class="inner">
                                            <h2><a href="{{ lroute('services') }}">{{ __('home.services_section.main_card.title') }} <span
                                                        class="icon-right-arrow-1"></span></a></h2>
                                            <p>{{ __('home.services_section.main_card.text') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Rangée 1 --}}
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.3s">
                                    <div class="services-two__left-content-single text-center">
                                        <div class="icon-box">
                                            <img class="cortex-icon" src="{{ asset('/images/icon/sinistre.svg') }}" alt="" width="48" height="48" loading="lazy">
                                        </div>
                                        <div class="inner">
                                            <h2><a href="{{ lroute('services') }}">{{ __('home.services_section.cards.0.title') }} <span
                                                        class="icon-right-arrow-1"></span></a></h2>
                                            <p>{{ __('home.services_section.cards.0.text') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.3s">
                                    <div class="services-two__left-content-single text-center">
                                        <div class="icon-box">
                                            <img class="cortex-icon" src="{{ asset('/images/icon/industrie.svg') }}" alt="" width="48" height="48" loading="lazy">
                                        </div>
                                        <div class="inner">
                                            <h2><a href="{{ lroute('services') }}">{{ __('home.services_section.cards.1.title') }} <span
                                                        class="icon-right-arrow-1"></span></a></h2>
                                            <p>{{ __('home.services_section.cards.1.text') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Rangée 2 --}}
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.1s">
                                    <div class="services-two__left-content-single text-center">
                                        <div class="icon-box">
                                            <img class="cortex-icon" src="{{ asset('/images/icon/vitre.svg') }}" alt="" width="48" height="48" loading="lazy">
                                        </div>
                                        <div class="inner">
                                            <h2><a href="{{ lroute('services') }}">{{ __('home.services_section.cards.2.title') }} <span
                                                        class="icon-right-arrow-1"></span></a></h2>
                                            <p>{{ __('home.services_section.cards.2.text') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.3s">
                                    <div class="services-two__left-content-single text-center">
                                        <div class="icon-box">
                                            <img class="cortex-icon" src="{{ asset('/images/icon/communs.svg') }}" alt="" width="48" height="48" loading="lazy">
                                        </div>
                                        <div class="inner">
                                            <h2><a href="{{ lroute('services') }}">{{ __('home.services_section.cards.3.title') }} <span
                                                        class="icon-right-arrow-1"></span></a></h2>
                                            <p>{{ __('home.services_section.cards.3.text') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="col-12 col-xl-2 d-flex align-items-center justify-content-center">
                        <div class="services-two__right-content">
                            @foreach(__('home.services_section.highlights') as $i => $highlight)
                                <div class="services-two__right-content-single wow animated fadeInUp"
                                    data-wow-delay="{{ $i % 2 === 0 ? '0.1s' : '0.3s' }}">
                                    <div class="icon-box">
                                        <img class="cortex-icon" src="{{ asset('/images/icon/' . ['solution','telephone','shield','human-resources','sustainable','quality'][$i] . '.png') }}" alt="" width="48" height="48" loading="lazy">
                                    </div>

                                    <div class="title-box">
                                        <h2>{{ $highlight }}</h2>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-two">
    <div class="container">
        <div class="row">
            <!--Start About Two Content-->
            <div class="col-xl-6">
                <div class="about-two__content">
                    <div class="sec-title-two">
                        <div class="sub-title">
                            <h3>{{ __('home.about_section.sub_title') }}</h3>
                            <div class="round-two"></div>
                        </div>
                        <h2>{{ __('home.about_section.title') }}</h2>
                    </div>
                    <div class="text-box1">
                        <p>{{ __('home.about_section.text') }}</p>
                    </div>

                    <ul class="about-two__content-list">
                        @foreach(__('home.about_section.list') as $item)
                        <li>
                            <div class="inner">
                                <div class="icon-box">
                                    <span class="icon-check-1"></span>
                                </div>
                                <div class="text-box">
                                    <p>{{ $item }}</p>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>

                <div class="btn-box">
                    <a class="thm-btn" href="{{ lroute('about') }}">
                        <span class="txt">{{ __('home.about_section.button') }}</span>
                        <i class="icon-double-chevron"></i>
                    </a>
                </div>
            </div>
                <div class="col-xl-6">
        <div class="about-two__right">
            <div class="row filter-layout masonary-layout">
                <!--Start About Two Right Single-->
                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.1s">
                    <div class="about-two__right-single">
                        <div class="img-box">
                            <img src="{{ asset('/images/about/about-v2-img2.png') }}" alt="{{ __('home.about_section.img_alt1') }}" width="1254" height="1254" loading="lazy">
                        </div>
                    </div>
                </div>
                <!--End About Two Right Single-->
                <!--Start About Two Right Single-->
                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.3s">
                    <div class="about-two__right-single mb30">
                        <div class="img-box">
                            <img src="{{ asset('/images/about/about-v2-img3.png') }}" alt="{{ __('home.about_section.img_alt2') }}" width="1254" height="1254" loading="lazy">
                        </div>
                    </div>
                </div>
                <!--End About Two Right Single-->

                <!--Start About Two Right Single-->
                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp" data-wow-delay="0.1s">
                    <div class="about-two__right-single">
                        <div class="counter-box">
                            <h2> <span class="odometer" data-count="500">00</span><span
                                    class="plus">+</span> <br>
                                {!! __('home.about_section.counter_suffix') !!}
                            </h2>
                        </div>
                    </div>
                </div>
                <!--End About Two Right Single-->

                <!--Start About Two Right Single-->
                <div class="col-xl-6 col-lg-6 col-md-6 wow animated fadeInUp img4-welcomeabout"
                    data-wow-delay="0.3s">
                    <div class="about-two__right-single">
                        <div class="img-box">
                            <img src="{{ asset('/images/about/about-v1-img1.png') }}" alt="{{ __('home.about_section.img_alt3') }}" width="300" height="300" loading="lazy">
                        </div>
                    </div>
                </div>
                <!--End About Two Right Single-->
            </div>
        </div>
    </div>

        </div>
    </div>
    <!--End About Two Content-->

</section>

<section class="feature-one">
    <div class="container">
        <div class="row">
            <div class="col-xl-7">
                <div class="feature-one__content">
                    <ul class="feature-one__content-list">
                        @foreach(__('home.feature_section.list') as $i => $item)
                        <li class="wow fadeInLeft" data-wow-delay="{{ ($i + 1) * 100 }}ms" data-wow-duration="1000ms">
                            <div class="inner">
                                <div class="left-content">
                                    <div class="icon-box">
                                        <span class="icon-construction{{ $i > 0 ? '-' . $i : '' }}"></span>
                                    </div>
                                    <div class="title-box">
                                        <h2>{!! $item !!}</h2>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="col-xl-5" style="height: auto;">
                <div class="feature-one__form" style="background-color: #FFFFFF">
                    <h2 style="font-weight: 700;  font-size: 40px;
                        line-height: 40px;">{{ __('home.feature_section.form_title') }}</h2>
                    <img src="{{ asset('images/contact/customer.png') }}" alt="" width="1024" height="1536" loading="lazy"
                        style="height: 265px;width: auto; text-align: center;">

                    <p style="color: dark !important; margin-bottom: 20px;">{{ __('home.feature_section.form_text') }}</p>
                    <div class="btn-box">
                        <a class="thm-btn"
                            href="https://outlook.office.com/book/CORTEXCLEAN@cortexfacility.com/">
                            <span class="txt">{{ __('home.feature_section.form_button') }}</span>
                            <i class="icon-double-chevron"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection