@extends('layouts.frontend.master')

@section('content')

<!-- Slider Head -->
<div class="main-body-slider relative overflow-hidden z-[9]" 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-[700px] m-auto text-center">
                        {!! app()->getLocale() == 'ar' ? $slider->description_ar : $slider->description_en !!}
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- Info About Us -->
<div class="mb-4 relative z-[9]" 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-8 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-secondary font-bold text-[40px]">{{ __('website.about') }}</h3>
                <p class="max-w-[750px] my-[10px] leading-[30px] text-[16px] text-secondary">
                    {!! app()->getLocale() == 'ar' ? $settings['whoWeAre_ar'] : $settings['whoWeAre_en'] !!}
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Section More Info -->
<div class="lg:my-[40px] relative z-[9]">
    <div class="container">
        <div class="flex justify-center flex-col lg:flex-row lg:gap-[150px]">
            <div class="text-center my-3">
                <img loading="lazy" src="{{asset('frontend')}}/images/2-01.png"
                    class="w-[100px] h-[100px] object-contain m-auto" alt="" />
                <h1 class="text-[20px] text-secondary mt-3 font-bold">{!! app()->getLocale() == 'ar' ?
                    $settings['distinguishes1_ar'] : $settings['distinguishes1_en'] !!}</h1>
            </div>
            <div class="text-center my-3">
                <img loading="lazy" src="{{asset('frontend')}}/images/1-01.png"
                    class="w-[100px] h-[100px] object-contain m-auto" alt="" />
                <h1 class="text-[20px] text-secondary mt-3 font-bold">{!! app()->getLocale() == 'ar' ?
                    $settings['distinguishes2_ar'] : $settings['distinguishes2_en'] !!}</h1>
            </div>
            <div class="text-center my-3">
                <img loading="lazy" src="{{asset('frontend')}}/images/3-01.png"
                    class="w-[100px] h-[100px] object-contain m-auto" alt="" />
                <h1 class="text-[20px] text-secondary mt-3 font-bold">{!! app()->getLocale() == 'ar' ?
                    $settings['distinguishes3_ar'] : $settings['distinguishes3_en'] !!}</h1>
            </div>
        </div>
    </div>
</div>

<!-- Section Our Us -->
<div class="py-[40px] bg-overlay2 relative z-[9]">
    <div class="container">
        <div class="grid grid-cols-12 gap-y-2 py-3 items-center overflow-hidden">
            <div class="lg:col-span-9 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-center lg:flex-row flex-col gap-3">
                    <div class="text-center">
                        <img loading="lazy" src="{{asset('frontend')}}/images/10-01.png" class="max-w-[100px]" alt="" />
                        <h3 class="text-secondary text-[30px]">{{ __('website.ourMission') }}</h3>
                    </div>
                    <div class="px-4">
                        <p class="my-[10px] leading-[30px] text-[18px] text-secondary">
                            {!! app()->getLocale() == 'ar' ? $settings['message_ar'] :
                            $settings['message_en'] !!}
                        </p>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-3 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
            </div>
        </div>
        <div class="grid grid-cols-12 gap-y-2 py-3 items-center overflow-hidden">
            <div class="lg:col-span-3 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
            </div>
            <div class="lg:col-span-9 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-center lg:flex-row flex-col gap-3">
                    <div class="text-center">
                        <img loading="lazy" src="{{asset('frontend')}}/images/9-01.png" class="max-w-[100px] relative"
                            alt="" />
                        <h3 class="text-secondary text-[30px] relative">{{ __('website.ourVision') }}</h3>
                    </div>
                    <div class="px-4">
                        <p class="my-[10px] leading-[30px] text-[18px] text-secondary">
                            {!! app()->getLocale() == '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-9 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-center lg:flex-row flex-col gap-3">
                    <div class="text-center">
                        <img loading="lazy" src="{{asset('frontend')}}/images/11-01.png" class="max-w-[100px]" alt="" />
                        <h3 class="text-secondary text-[30px]">{{ __('website.ourGoal') }}</h3>
                    </div>
                    <div class="px-4">
                        <p class="my-[10px] leading-[30px] text-[18px] text-secondary">
                            {!! app()->getLocale() == 'ar' ? $settings['goal_ar'] :
                            $settings['goal_en'] !!} </p>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-3 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
            </div>
        </div>
    </div>
</div>

<!-- Section Products -->
<div class="my-4 relative z-[9] py-[20px]" id="Products">
    <div class="my-[30px] relative">
        <h5 class="text-secondary font-bold text-[40px] text-center">
            {{ __('website.products') }}
        </h5>
    </div>
    <div class="container relative z-[9] py-9">
        <div class="grid grid-cols-12 gap-4 items-center justify-center overflow-hidden">
            @foreach ($data['products'] as $key => $product)
            <div class="lg:col-span-3 col-span-12 my-2 text-center">
                <div class="text-center group bg-white rounded-[20px] overflow-hidden shadow-lg p-3">
                    <div class="overflow-hidden rounded-[20px]">
                        <img loading="lazy" src="{{ $product->image() }}"
                            class="w-full h-[200px] m-auto transition duration-500 ease-in-out group-hover:scale-[1.1]"
                            alt="" />
                    </div>
                    <div class="p-4">
                        <h3 class="text-secondary mb-3 text-[25px] font-bold relative">
                            {{ app()->getLocale() == 'ar' ? $product->title_ar : $product->title_en }}
                        </h3>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <!--<div class="flex items-center justify-center mt-9">-->
        <!--    <a href="{{ route('products') }}"-->
        <!--        class="bg-main inline-block m-auto text-[15px] text-white rounded-[10px] px-5 py-2">{{ __('website.seeMore') }}</a>-->
        <!--</div>-->
    </div>
</div>

<!-- Section Success Partners -->
<div class="my-4 relative z-[9]">
    <div class="my-[30px] relative">
        <h5 class="text-secondary font-bold text-[40px] text-center">
            {{ __('website.successPartners') }}
        </h5>
    </div>
    <div class="container my-[70px]">
        <div id="sliderPartners" class="owl-carousel owl-theme sliderPartners">
            @foreach ($data['menus'] as $menu)
            <div class="item text-center group">
                <img loading="lazy" src="{{ $menu->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 z-[9]">
    <div class="my-[30px]">
        <h5 class="text-secondary font-bold text-[40px] 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-main 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