@extends('layouts.guest')

@section('content')
    <div class="bg-white">
        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">

            <div class="sm:flex mb-16">
                <div class="mb-4 shrink-0 sm:mr-4 sm:mb-0">
                    <img class="aspect-12/7 h-48 rounded-lg object-cover shadow-lg lg:aspect-auto"
                        src="{{ asset('assets\img\ulucami_old_agusto_leon_mini.jpg') }}" alt="">
                </div>
                <div>
                    <h4 class="text-2xl font-bold">Tarihçe</h4>
                    <p class="mt-1">Hoş geldiniz… </br>
                        Şu anda sadece bir caminin değil, bir medeniyetin kalbinde, tarih boyunca
                        yüzbinlerce adımın sessizce yankılandığı kutsal bir mekândasınız: Burası Bursa Ulu Cami.
                        Ulu Cami, Bursa’nın tam merkezinde, Atatürk Caddesi üzerinde yer alıyor. Osmanlı
                        sultanlarından Yıldırım Bayezıd tarafından, 1399 yılında yaptırılmıştır. Caminin
                        mimarının Ali Neccar olduğu bilinmektedir.
                    </p>
                    <div class="max-w-7xl mt-6">
                        <a href="{{ route('about') }}"
                            class="rounded-md bg-gray-600 px-5 py-3.5 text-base font-semibold text-white shadow-xs hover:bg-gray-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">TARİHÇE'Yİ
                            DİNLEYİN</a>
                    </div>
                </div>
            </div>

            <div class="md:flex md:items-center md:justify-between">
                <h2 class="text-2xl font-bold tracking-tight text-gray-900">Tüm Eserler</h2>
            </div>

            <div class="mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8">
                @foreach ($artifacts as $item)
                    <div class="group relative">
                        <div
                            class="h-36 w-full overflow-hidden rounded-md bg-gray-200 border-2 border-black group-hover:opacity-75 lg:h-56 mb-4">
                            @php
                                $jpgPath = 'uploads/img/s/' . $item->image . '.jpg';
                                $pngPath = 'uploads/img/s/' . $item->image . '.png';
                                $imagePath = file_exists(public_path($jpgPath)) ? $jpgPath : $pngPath;
                            @endphp
                            <img src="{{ asset($imagePath) }}" alt="{{ $item->name }}"
                                class="size-full object-cover object-right">
                        </div>
                        <div class="flex items-center mt-4 text-xl font-normal text-gray-400">
                            <span class="material-symbols-rounded mr-1">
                                brightness_empty
                            </span>
                            <span>{{ $item->number }}</span>
                        </div>
                        <h3 class="mt-1 mb-2 text-base text-gray-700">
                            <a href="{{ route('artifact.show', $item->id) }}" class="font-semibold text-gray-900">
                                <span class="absolute inset-0"></span>
                                {{ $item->name }}
                            </a>
                        </h3>
                        <p class="mt-1 text-sm text-gray-400">{{ $item->author }}</p>
                    </div>
                @endforeach
            </div>

            <div class="mt-8 text-sm md:hidden">
            </div>
        </div>
    </div>
@endsection