@extends('layouts.guest')

<div class="relative content-center bg-gray-900">
    <!-- Decorative image and overlay -->
    <div aria-hidden="true" class="absolute inset-0 overflow-hidden">
        <img src="{{ asset('../assets/images/h02.jpg') }}" alt="" class="object-cover object-center w-full h-96">
    </div>
    <div aria-hidden="true" class="absolute inset-0 bg-gray-900 opacity-40"></div>

    <!--NAV-->
    @include('layouts._partials._navbar')

    {{--HERO--}}
    {{--
    <div class="relative flex flex-col px-8 mx-auto max-w-7xl py-28">
        <h1 class="text-4xl font-bold tracking-tight text-white">{{ __('Our Services') }}</h1>
    </div>
    --}}
</div>

@section('content')

<div class="relative flex flex-col items-center max-w-3xl mx-auto mt-24 text-center">
    <h2 id="comfort-heading" class="text-4xl font-bold tracking-tight sm:text-5xl text-sky-950">
        {{ app()->getLocale() == 'en' ? $page->title : $page->title_ar }}
    </h2>
    <p class="my-4 font-serif text-xl italic text-gray-400">
        {{ app()->getLocale() == 'en' ? $page->subtitle : $page->subtitle_ar }}
    </p>
</div>

<!--SERVICES-->
<div class="pt-12 pb-24 bg-white">
    <div class="px-6 mx-auto max-w-7xl lg:px-8">
        <dl class="grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 lg:gap-x-8">
            @foreach($services as $item)
            <div class="relative">
                <div class="flex justify-center py-10">
                    <img class="h-10" src="{{ asset('uploads/images/'. $item->image) }}" alt="">
                </div>
                <dt class="{{ app()->getLocale() == 'ar' ? 'text-right' : '' }}">
                    @if(app()->getLocale() == 'en')
                    <svg class="absolute w-6 h-6 mt-1 text-sky-950" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    @endif
                    <p class="ml-10 text-lg font-semibold leading-8 text-gray-900">
                        {{ app()->getLocale() == 'ar' ? $item->title_ar : $item->title}}
                    </p>
                </dt>
                <dd dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}"
                    class="ml-10 mt-2 text-xs leading-7 text-gray-600 {!! app()->getLocale() == 'ar' ? 'text-right' : '' !!}">
                    {!! app()->getLocale() == 'ar' ? $item->content_ar : $item->content !!}
                </dd>
                <div class="mt-4 text-right">
                    <a href="{{ route('service.detail', $item->id) }}"
                        class="inline-flex items-center px-4 py-2 text-xs text-white rounded-md shadow-sm end-0 gap-x-2 bg-sky-950 hover:bg-sky-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                        {{ __('general.see_details') }}
                    </a>
                </div>
            </div>
            @endforeach
        </dl>
    </div>
</div>

<div class="relative pt-24 lg:pt-12">
    <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300"></div>
    </div>
</div>

@include('layouts._partials._instagram-page')

{{-- <div class="pb-24">
    @include('layouts._partials._testimonial')
</div>
--}}

@endsection