@extends("Site.Layouts.blank")
@section ("content")

    <swiper-home-slider >
        @foreach($HomeSlider as $item)
            <swiper-slide class="relative">
                <img src="{{$item->image}}" alt="{{$item->title}}" class="w-full  min-h-[320px] md:h-auto object-cover ">
                <div class=" absolute center-absolute text-center  w-3/4 md:w-1/2	" >
                    <h2 class="text-white text-2xl sm:text-2xl md:text-4.5xl font-bold mb-4"  data-aos="zoom-in"  > {!! nl2br(e($item->title)) !!} </h2>
                    <p class="text-white text-sm md:text-xl" data-aos="fade-up" > {!! nl2br(e($item->description)) !!}  </p>
                </div>
            </swiper-slide>
        @endforeach
    </swiper-home-slider>


    <!-- *=*=*=*=*=*=*=*=*=* Section 2 *=*=*=*=*=*=*=*=*=* -->
    <div class="w-full relative  my-4">
        <img class="w-full min-h-[220px] md:h-auto object-cover" src="{{asset('site_assets/images/temp/home_section_2.webp')}}" alt="banner">
        <div class="absolute center-absolute text-center drop-shadow-lg	min-w-full sm:min-w-fit md:min-w-fit " id="home_section2_text_wrapper" >
            <h2 class="text-primary text-xl lg:text-2xl md:mb-3" data-aos="fade-right" >  {{ $pageContent["section_2_title_$lang"] }} </h2>
            <p class="text-secondary text-sm lg:text-base leading-2 lg:leading-8 xl:leading-10" data-aos="fade-up"> {{ $pageContent["section_2_description_$lang"] }} </p>
        </div>
    </div>


    <!-- *=*=*=*=*=*=*=*=*=* youtube *=*=*=*=*=*=*=*=*=* -->
    <div>
        <iframe width="100%" height="700" src="https://www.youtube.com/embed/{{$pageContent['youtube']}}" title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
        </iframe>
    </div>


    <!-- *=*=*=*=*=*=*=*=*=* Section About *=*=*=*=*=*=*=*=*=* -->
    <div class="w-full  flex items-center flex-col md:flex-row z-3 gap-y-4 my-20 p-6 md:p-16  bg-cover" style="background-image: url('{{asset('site_assets/images/temp/section_about_bg.png')}}')">
        <div class="flex-1.3">
            <img class="w-full" src="{{$pageContent['about_image']}}" alt="banner" data-aos="fade-right">
        </div>

        <div class="flex-2 px-2 sm:px-6 md:px-10 " data-aos="flip-up">
            <h2 class="md:mb-3  text-primary    text-3xl xl:text-4xl  text-center md:text-start"  >  @lang('site.ABOUT AlBADEEL')  </h2> <!-- {{config('app.name')}}  -->
            <p class="text-secondary mb-3  lg:leading-relaxed xl:leading-relaxed md:text-lg lg:text-xl xl:text-[25px] ">
                {!! nl2br(e($pageContent["about_shorter_description_$lang"])) !!}
            </p>
            <p class="text-[#4C4849] lg:text-md xl:leading-loose   mb-5">
                {!! nl2br(e($pageContent["about_longer_description_$lang"])) !!}
            </p>
            <div class="text-center md:text-start">
                <a href="{{url('about')}}" class=" bg-primary text-white px-10 py-3 rounded-lg drop-shadow-lg hover:scale-x-50	 transition-all">
                    @lang('site.Read more')
                </a>
            </div>
        </div>
    </div>


    <!-- *=*=*=*=*=*=*=*=*=* PROJECTS *=*=*=*=*=*=*=*=*=* -->
    <h1 class="ms-2 md:ms-12  text-gray-400 text-2xl md:text-4xl text-primary  mb-10"> @lang('site.PROJECTS') </h1>

    <div class="center-by-flex ">
        <projects-slider :projects="{{$projects}}" class="w-11/12 md:w-4/5"></projects-slider>
    </div>

    <div class="text-center my-16">
        <a href="{{url('Projects')}}" class=" bg-primary text-white px-10 py-3 rounded-lg drop-shadow-lg hover:scale-x-50	 transition-all">
            @lang('site.Read more')
        </a>
    </div>



    <!-- *=*=*=*=*=*=*=*=*=* Section Services *=*=*=*=*=*=*=*=*=* -->
    <section class="bg-LightGray-100 py-10">

        <h1 class="ml-2 md:ms-12 text-2xl md:text-4xl text-primary  mb-12"> @lang('site.SERVICES') </h1>


        <div class="grid  grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5  gap-3 mx-2 md:mx-11  " data-aos="zoom-in-up">
            @foreach($Services as $Service)
                <service-card :service="{{$Service}}"  lang_readmore="@lang('site.Read more')"  url="{{url('Services#Service_'. \Str::slug($Service->name))}}" >  </service-card>
            @endforeach
        </div>

        <br>

    </section>


    <!-- *=*=*=*=*=*=*=*=*=* Section CLIENTS *=*=*=*=*=*=*=*=*=* -->
    <section class=" py-10">

        <h1 class="ms-2 md:ms-12  text-2xl md:text-4xl text-primary  mb-12"> @lang('site.CLIENTS') </h1>

        <div class="flex flex-wrap">
            <swiper-client :key="changing_key">
                @foreach($Clients as $Client)
                    <swiper-slide key="{{$Client->id}}">
                        <div  class="center-by-flex h-full  "> <!-- grayscale hover:grayscale-0 -->
                            <img src="{{$Client->image}}" alt="{{$Client->name}}">
                        </div>
                    </swiper-slide>
                @endforeach
            </swiper-client>
            <br>
            <swiper-client-rtl  key="78727275">
                @foreach($Clients as $Client)
                    <swiper-slide key="{{$Client->id}}">
                        <div  class="center-by-flex h-full 	">
                            <img src="{{$Client->image}}" alt="{{$Client->name}}">
                        </div>
                    </swiper-slide>
                @endforeach
            </swiper-client-rtl>
        </div>

        <div class="text-center my-16">
            <a href="{{url('clients')}}" class=" bg-primary text-white px-10 py-3 rounded-lg drop-shadow-lg hover:scale-x-50	 transition-all">
                @lang('site.Read more')
            </a>
        </div>


    </section>


    <!-- *=*=*=*=*=*=*=*=*=* Section Counter *=*=*=*=*=*=*=*=*=* -->
    <section class="relative "  >
        <img src="{{asset('site_assets/images/home_counter/counter_background.webp')}}"  class="w-full  object-cover   min-h-[400px] md:min-h-[300px] "  alt="counter background">
        <div class="absolute inset-0  grid grid-cols-2  md:center-by-flex  items-center  md:gap-x-12    text-center">  <!--   -->
            <div class="flex flex-col items-center gap-2" >
                <img src="{{asset('site_assets/images/home_counter/Finished Projects.webp')}}" alt="Finished Projects">
                <h5 class="text-xl lg:text-2xl text-white"> @lang('site.Finished Projects')  </h5>
                <p class="text-3xl lg:text-5xl text-white font-bold" data-aos="flip-left" data-aos-duration="3000"> {{ $pageContent["Finished_Projects"] }} </p>
            </div>
            <div class="flex flex-col items-center gap-2">
                <img src="{{asset('site_assets/images/home_counter/Happy clients.webp')}}" alt="Happy clients">
                <h5 class="text-xl lg:text-2xl text-white"> @lang('site.Happy clients')  </h5>
                <p class="text-3xl lg:text-5xl text-white font-bold" data-aos="flip-left" data-aos-duration="3000"> {{ $pageContent["Happy_clients"] }} </p>
            </div>
            <div class="flex flex-col items-center gap-2">
                <img src="{{asset('site_assets/images/home_counter/industries served.webp')}}" alt="industries served">
                <h5 class="text-xl lg:text-2xl text-white"> @lang('site.industries served')  </h5>
                <p class="text-3xl lg:text-5xl text-white font-bold" data-aos="flip-left" data-aos-duration="3000">  {{ $pageContent["industries_served"] }} </p>
            </div>
            <div class="flex flex-col items-center gap-2">
                <img src="{{asset('site_assets/images/home_counter/live Projects.webp')}}" alt="live Projects">
                <h5 class="text-xl lg:text-2xl text-white"> @lang('site.live Projects')  </h5>
                <p class="text-3xl lg:text-5xl text-white font-bold" data-aos="flip-left" data-aos-duration="3000"> {{ $pageContent["live_Projects"] }} </p>
            </div>
        </div>
    </section>




    <!-- *=*=*=*=*=*=*=*=*=* Section CONTACT US *=*=*=*=*=*=*=*=*=* -->
    @include('Site._contact_us')



@endsection