@extends('front.layout.app')
@section('content')
    <section class="main-slider main-slider--inner p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-slide">
                <div class="slide-inner bg-image"
                     data-background="{{ $page->cmsImages('background_banner_image') ?? '' }}">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <div class="slideOne">
                                    <h2>{{ $content['banner_title'] }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12" data-aos="fade-up">
                    <div class="aboutcntnt">
                        <h2>{{ $content['what_2_section_heading'] }}</h2>
                        <p class="paraa paraa--letter">{{ $content['what_2_section_desc'] }}</p>
                        <div class="row justify-content-between">
                            <div class="col-md-6">
                                <p>{{ $content['what_2_section_inner_heading'] }}</p>
                                <ul class="aboutcntnt__list">
                                    @foreach($content['what_2_section_points'] as $point)
                                        <li data-aos="fade-up">{{ $point }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="col-md-5">
                                <figure class="aboutimg aboutimg--sm">
                                    <img src="{{ $page->cmsImages('what_2_section_img') ?? '' }}" class="img-fluid"
                                         alt="image">
                                </figure>
                                {{--                            <div class="swiper listingSlider">--}}
                                {{--                                <div class="swiper-wrapper">--}}
                                {{--                                    <div class="swiper-slide">--}}
                                {{--                                        <figure class="aboutimg aboutimg--sm">--}}
                                {{--                                            <img src="{{ asset('front/images/popup2.webp') }}" class="img-fluid" alt="image">--}}
                                {{--                                        </figure>--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="swiper-slide">--}}
                                {{--                                        <figure class="aboutimg aboutimg--sm">--}}
                                {{--                                            <img src="{{ asset('front/images/popup1.webp') }}" class="img-fluid" alt="image">--}}
                                {{--                                        </figure>--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="swiper-slide">--}}
                                {{--                                        <figure class="aboutimg aboutimg--sm">--}}
                                {{--                                            <img src="{{ asset('front/images/popup9.webp') }}" class="img-fluid" alt="image">--}}
                                {{--                                        </figure>--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="swiper-slide">--}}
                                {{--                                        <figure class="aboutimg aboutimg--sm">--}}
                                {{--                                            <img src="{{ asset('front/images/popup10.webp') }}" class="img-fluid" alt="image">--}}
                                {{--                                        </figure>--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="swiper-slide">--}}
                                {{--                                        <figure class="aboutimg aboutimg--sm">--}}
                                {{--                                            <img src="{{ asset('front/images/popup23.webp') }}" class="img-fluid" alt="image">--}}
                                {{--                                        </figure>--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="swiper-slide">--}}
                                {{--                                        <figure class="aboutimg aboutimg--sm">--}}
                                {{--                                            <img src="{{ asset('front/images/popup24.webp') }}" class="img-fluid" alt="image">--}}
                                {{--                                        </figure>--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                                {{--                                <div class="swiper-button-next"></div>--}}
                                {{--                                <div class="swiper-button-prev"></div>--}}
                                {{--                            </div>--}}
                            </div>
                        </div>
                        <h2>{{ $content['what_3_section_heading'] }}</h2>
                        <p class="paraa paraa--letter">
                            <em>{{ $content['what_3_section_desc'] }}</em>
                        </p>
                        <p>{{ $content['what_3_section_inner_heading'] }}</p>
                        <ul class="aboutcntnt__list">
                            @foreach($content['what_3_section_points'] as $point)
                                <li data-aos="fade-up">{{ $point }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonialSec">
        <div class="container">
            <h2 class="mainHead text-center  mb-3" data-aos="fade-up">Client Reviews</h2>
            <div class="row">
                <div class="col-md-12" data-aos="fade-up">
                    <div class="swiper reviewsSlider">
                        <div class="swiper-wrapper">

                            @forelse($reviews as $review)
                                <div class="swiper-slide">
                                    <div class="reviewsBox">
                                        <img src="{{ asset('front/images/quote11.webp') }}" class="img-fluid quoteimg1"
                                             alt="">
                                        <p>{{ $review->description ?? '' }}</p>
                                        <span class="review-path"></span>
                                        <img src="{{ asset('front/images/quote22.webp') }}" class="img-fluid quoteimg2"
                                             alt="">
                                        <div class="revewsImg">
                                            <!-- <img src="images/user1.webp" class="img-fluid" alt="img"> -->
                                            <div class="names">
                                                <h6>{{ $review->name ?? '' }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @empty

                                <p>No Reviews yet!</p>

                            @endforelse


                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </section>
    @include('front.layout.partials.contact-form')
@endsection