@extends('layouts.public')

@section('content')
    <section class="container-shell section-gap">
        <div class="max-w-3xl">
            <div class="eyebrow">{{ __('common.gallery') }}</div>
            <h1 class="mt-5 text-4xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white sm:text-5xl">{{ __('messages.gallery_page_title') }}</h1>
            <p class="mt-4 body-lg">{{ __('messages.gallery_title') }}</p>
        </div>
        <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($galleryItems as $item)
                <article class="premium-card p-4">
                    @if($item->image)
                        @php
                            $image = \Illuminate\Support\Str::startsWith($item->image, ['http://', 'https://', '/'])
                                ? $item->image
                                : asset('storage/'.$item->image);
                        @endphp
                        <img src="{{ $image }}" alt="{{ $item->localized_title }}" class="aspect-[4/3] w-full rounded-[20px] object-cover">
                    @else
                        <div class="aspect-[4/3] rounded-[20px] bg-gradient-to-br from-teal-100 to-sky-100 dark:from-teal-950/50 dark:to-sky-950/50"></div>
                    @endif
                    <div class="mt-4 flex items-center justify-between gap-3">
                        <h2 class="text-lg font-semibold text-slate-950 dark:text-white">{{ $item->localized_title }}</h2>
                        @if($item->category)
                            <span class="status-pill bg-teal-100 text-teal-800 dark:bg-teal-950/40 dark:text-teal-200">{{ $item->category }}</span>
                        @endif
                    </div>
                    @if($item->description)
                        <p class="mt-2 text-sm leading-7 text-slate-600 dark:text-slate-300">{{ $item->description }}</p>
                    @endif
                </article>
            @endforeach
        </div>
    </section>
@endsection