@extends('layouts.guest')

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

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

</div>

@section('content')

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

<!--WORKS-->
<div class="max-w-7xl mx-auto px-8 mb-24 mt-12">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">

        @foreach($works as $item)
        <div
            class="relative flex items-center space-x-3 rounded-lg border border-gray-200 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-yellow-500 focus-within:ring-offset-2 hover:border-yellow-400">
            <div class="flex-shrink-0">
                @if($item->image != '' )
                <img class="h-24 w-24 rounded" src="{{ asset('uploads/images/'. $item->image) }}" alt="">
                @endif
            </div>
            <div class="min-w-0 flex-1">
                <a href="{{ route('work.detail', $item->id) }}"
                    class="focus:outline-none {{ app()->getLocale() == 'ar' ? 'text-right' : '' }}">
                    <span class="absolute inset-0" aria-hidden="true"></span>
                    <p class="font-bold text-lg text-gray-900">{{ app()->getLocale() == 'en' ? $item->title :
                        $item->title_ar }}</p>
                    <p class="truncate text-xs text-gray-300">{{ __('general.see_details') }}</p>
                </a>
            </div>
        </div>
        @endforeach
    </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>

{{--INSTAGRAM--}}
@include('layouts._partials._instagram-page')

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

@endsection