@extends('layouts.frontend.master')

@section('content')

<!-- Slider Head -->
<div class="main-body-slider relative overflow-hidden z-[9] border-b" id="Home">
    <div id="sliderHome" class="owl-carousel owl-theme sliderHome overflow-hidden">
        @foreach ($data['sliders'] as $slider)
        <div class="item position-relative">
            <img src="{{ $slider->main_image() }}" alt="" loading="lazy" class="lg:h-screen w-full h-[400px]" />
            <div class="overlay-fix w-full h-full flex items-center absolute top-0 right-0 bg-overlay">
                <div class="container overflow-hidden">
                    <div class="over-info lg:w-[600px] m-auto text-center">
                        {{-- @if ($slider->title_ar || $slider->title_en)
                        <h1 class="font-bold lg:text-[60px] text-[40px] text-white">
                            {!! app()->isLocale('ar') ? $slider->title_ar : $slider->title_en !!}
                        </h1>
                        @endif --}}
                        @if ($slider->description_ar || $slider->description_en)
                        <!--<p class="text-white text-[22px]">-->
                            {!! app()->isLocale('ar') ? $slider->description_ar : $slider->description_en !!}
                        <!--</p>-->
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- Info About Us -->
<div class="mb-4" id="About">
    <div class="container">
        <div class="grid grid-cols-12 gap-y-2 items-center py-3 overflow-hidden">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <h3 class="text-secondaryOld text-[40px]">{{ app()->isLocale('ar') ? $settings['website_name_ar'] :
                    $settings['website_name_en'] }}</h3>
                <p class="max-w-[550px] my-[15px] leading-[30px] text-[14px] text-black">
                    {{ app()->isLocale('ar') ? $settings['whoWeAre_ar'] : $settings['whoWeAre_en'] }}
                </p>
                {{-- <a href=""
                    class="bg-main inline-block text-[15px] text-white rounded-[13px] w-[150px] h-[45px] flex items-center justify-center">تحميل
                    البروفايل</a> --}}
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex justify-center">
                    <img loading="lazy" src="https://i.ibb.co/8N7D3dZ/5.png" class="w-[100%]" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section More Info -->
<div class="lg:my-[40px] relative">
    <img loading="lazy" src="{{asset('frontend')}}/images/CF-013.png"
        class="absolute top-[50%] translate-y-[-50%] right-0 w-full lg:block hidden" alt="" />
    <div class="container">
        <div class="flex justify-center flex-col lg:flex-row lg:gap-[70px]">
            <div class="text-center my-3">
                <img loading="lazy" src="{{asset('frontend')}}/images/Icons/13-01.png" class="max-w-[110px] m-auto"
                    alt="" />
                <h1 class="text-[16px] font-bold">{{ app()->isLocale('ar') ? $settings['distinguishes1_ar'] :
                    $settings['distinguishes1_en'] }}</h1>
            </div>
            <div class="text-center my-3">
                <img loading="lazy" src="{{asset('frontend')}}/images/Icons/14-01.png" class="max-w-[110px] m-auto"
                    alt="" />
                <h1 class="text-[16x] font-bold">{{ app()->isLocale('ar') ? $settings['distinguishes2_ar'] :
                    $settings['distinguishes2_en'] }}</h1>
            </div>
            <div class="text-center my-3">
                <img loading="lazy" src="{{asset('frontend')}}/images/Icons/15-01.png" class="max-w-[110px] m-auto"
                    alt="" />
                <h1 class="text-[16px] font-bold">{{ app()->isLocale('ar') ? $settings['distinguishes3_ar'] :
                    $settings['distinguishes3_en'] }}</h1>
            </div>
        </div>
    </div>
</div>

<!-- Section Our Us -->
<div class="py-[40px]">
    <div class="container">
        <div class="grid grid-cols-12 gap-y-2 py-3 items-center overflow-hidden">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex items-start gap-3">
                    <img loading="lazy" src="{{asset('frontend')}}/images/Icons/33-02.png" class="max-w-[70px]"
                        alt="" />
                    <div class="">
                        <h3
                            class="text-black text-[30px] leading-[40px] relative before:contant-[''] before:absolute before:bg-main before:w-[40px] before:h-[2px] before:bottom-[-5px] before:rtl:right-0 before:ltr:left-0">
                            {{ __('website.ourMission') }}
                        </h3>
                        <p class="max-w-[550px] my-[15px] leading-[30px] text-[15px] text-black">
                            {{ app()->isLocale('ar') ? $settings['message_ar'] : $settings['message_en'] }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex justify-center">
                    <img loading="lazy" src="https://i.ibb.co/Qm3BM5k/4.png" class="lg:w-[85%] w-full" alt="" />
                </div>
            </div>
        </div>
        <div class="grid grid-cols-12 gap-y-2 py-3 items-center overflow-hidden">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex justify-center">
                    <img loading="lazy" src="https://i.ibb.co/3pQXf77/3.png" class="lg:w-[85%] w-full" alt="" />
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex items-start gap-3">
                    <img loading="lazy" src="{{asset('frontend')}}/images/Icons/33-03.png"
                        class="max-w-[70px] relative top-[-12px]" alt="" />
                    <div class="">
                        <h3
                            class="text-black text-[30px] leading-[40px] relative before:contant-[''] before:absolute before:bg-main before:w-[40px] before:h-[2px] before:bottom-[-5px] before:rtl:right-0 before:ltr:left-0">
                            {{ __('website.ourVision') }}
                        </h3>
                        <p class="max-w-[550px] my-[15px] leading-[30px] text-[15px] text-black">
                            {{ app()->isLocale('ar') ? $settings['vision_ar'] : $settings['vision_en'] }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-12 gap-y-2 py-3 items-center overflow-hidden">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex items-start gap-3">
                    <img loading="lazy" src="{{asset('frontend')}}/images/Icons/33-01.png" class="max-w-[70px]"
                        alt="" />
                    <div class="">
                        <h3
                            class="text-black text-[30px] leading-[40px] relative before:contant-[''] before:absolute before:bg-main before:w-[40px] before:h-[2px] before:bottom-[-5px] before:rtl:right-0 before:ltr:left-0">
                            {{ __('website.ourGoal') }}
                        </h3>
                        <p class="max-w-[550px] my-[15px] leading-[30px] text-[15px] text-black">
                            {{ app()->isLocale('ar') ? $settings['goal_ar'] : $settings['goal_en'] }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex justify-center">
                    <img loading="lazy" src="https://i.ibb.co/dB8FQWz/6.png" class="lg:w-[85%] w-full" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Section Services -->
<div class="my-4 relative pb-[100px]" id="Services">
    <img loading="lazy" src="{{asset('frontend')}}/images/tree.png"
        class="opacity-[5%] absolute left-[30px] top-[-100px] lg:max-w-[800px] lg:block hidden" alt="" />
    <div class="my-[40px] relative">
        <img loading="lazy" src="{{asset('frontend')}}/images/CF-013.png"
            class="absolute top-[50%] translate-y-[-50%] right-0 w-full lg:block hidden" alt="" />
        <h5 class="text-main text-[35px] text-center">{{ __('website.services') }}</h5>
    </div>
    <div class="container relative z-[9] py-9">
        <div class="grid grid-cols-12 gap-4 lg:px-[100px] py-3 items-center justify-center overflow-hidden">
            @foreach ($data['services'] as $service)
            <div class="lg:col-span-3 col-span-12 my-3 text-center">
                <button data-modal-target="medium-modal-{{ $service->id }}"
                    data-modal-toggle="medium-modal-{{ $service->id }}" class="text-center group">
                    <img loading="lazy" src="{{ $service->image() }}"
                        class="max-w-[90px] m-auto transition duration-500 ease-in-out group-hover:translate-y-[-10px]"
                        alt="" />
                    <h3 class="text-black text-[17px] leading-[40px] relative">
                        {{ app()->getLocale() == 'ar' ? $service->title_ar : $service->title_en }}
                    </h3>
                </button>
            </div>

            <!-- Services Modal -->
            <div id="medium-modal-{{ $service->id }}" tabindex="-1"
                class="fixed h-screen top-0 left-0 bg-black/80 right-0 z-[99999] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
                <div class="relative w-full max-w-lg max-h-full">
                    <!-- Modal content -->
                    <div class="relative bg-white rounded-lg shadow">
                        <!-- Modal header -->
                        <div class="flex items-center justify-between p-4 border-b">
                            <h3 class="text-[25px] text-gray-900">{{ app()->getLocale() == 'ar' ? $service->title_ar :
                                $service->title_en }}</h3>
                            <button type="button" class="text-gray-400 bg-transparent"
                                data-modal-hide="medium-modal-{{ $service->id }}">
                                <i class="fa-solid fa-xmark text-[25px]"></i>
                            </button>
                        </div>
                        <!-- Modal body -->
                        <div class="p-4 md:p-5 space-y-4">
                            <p class="my-[15px] text-[14px] leading-[30px] text-black">
                                {!! app()->getLocale() == 'ar' ? $service->description_ar : $service->description_en !!}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Section Our Projects -->
<div class="my-4 relative min-h-[500px] z-[99]" id="Projects">
    <div class="my-[40px] relative">
        <img loading="lazy" src="{{asset('frontend')}}/images/CF-013.png"
            class="absolute top-[50%] translate-y-[-50%] right-0 w-full lg:block hidden" alt="" />
        <h5 class="text-main text-[40px] text-center">{{ __('website.projects') }}</h5>
    </div>
    <div class="container pt-[90px] pb-[30px]">
        <div id="sliderProjects" class="owl-carousel owl-theme sliderProjects">
            @foreach($data['projects'] as $project)
            <div class="item text-center group">
                <img loading="lazy" src="{{ $project->image() }}" alt="" class="!w-[180px] h-[180px] object-contain m-auto transition duration-500 ease-in-out group-hover:scale-[1.1]" />
                <h3 class="text-black text-[17px] mt-2 leading-[40px] relative">
                            {{ app()->getLocale() == 'ar' ? $project->title_ar : $project->title_en }}
                        </h3>
            </div>
            @endforeach
        </div>
        <a href="{{route('our-projects')}}"
            class="bg-main flex justify-center items-center m-auto mt-[50px] text-[17px] text-white rounded-tl-[20px] rounded-br-[20px] h-[50px] w-[200px]">
            {{ __('website.seeMore') }}
        </a>
    </div>
</div>

<!-- Section Success Partners -->
<div class="my-4 relative">
    <img loading="lazy" src="{{asset('frontend')}}/images/tree.png"
        class="opacity-[5%] absolute left-[30px] top-[-100px] lg:max-w-[800px] lg:block hidden" alt="" />
    <div class="my-[40px] relative">
        <img loading="lazy" src="{{asset('frontend')}}/images/CF-013.png"
            class="absolute top-[50%] translate-y-[-50%] right-0 w-full lg:block hidden" alt="" />
        <h5 class="text-main text-[35px] text-center">{{ __('website.successPartners') }}</h5>
    </div>
    <div class="container my-[70px]">
        <div id="sliderPartners" class="owl-carousel owl-theme sliderPartners">
            @foreach($data['partners'] as $partner)
            <div class="item text-center group">
                <img loading="lazy" src="{{ $partner->main_image() }}" alt=""
                    class="!w-[150px] h-[150px] object-contain m-auto transition duration-500 ease-in-out" />
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Section Customer Reviews -->
<div class="mb-[70px] relative">
    <div class="my-[40px]">
        <h5 class="text-main text-[35px] text-center">{{ __('website.customerReviews') }}</h5>
    </div>
    <div class="container">
        <div id="sliderCustomer" class="owl-carousel owl-theme sliderCustomer">
                @foreach ($data['reviews'] as $review)
                    <div class="item text-center px-6">
                        <div
                            class="my-4 border-[4px] border-secondaryOld p-4 rounded-tr-[40px] rounded-bl-[40px] relative before:contant-[''] before:w-[30px] before:h-[4px] before:bg-white before:absolute before:left-[5px] before:top-[-4px] after:contant-[''] after:w-[30px] after:h-[4px] after:bg-white after:absolute after:right-[5px] after:bottom-[-4px]">
                            <i class="fa-solid fa-quote-right absolute bottom-[-10px] right-[15px] z-[9]"></i>
                            <i class="fa-solid fa-quote-left absolute top-[-10px] left-[15px] z-[9]"></i>
                            <h5 class="text-main text-[22px] text-center border-b pb-2">
                                {{ app()->getLocale() == 'ar' ? $review->name_ar : $review->name_en }}
                            </h5>
                            <p class="mt-[15px] leading-[30px] text-[14px] text-black">
                                {!! app()->getLocale() == 'ar' ? $review->description_ar : $review->description_en !!}
                            </p>
                        </div>
                    </div>
                @endforeach
        </div>
    </div>
</div>
@endsection