@extends('layouts.app')

@section('title', $gallery['title'] . ' — ' . config('gerg.name'))

@section('content')
    @include('partials.page-hero', ['title' => $gallery['title'], 'subtitle' => $gallery['description'], 'breadcrumb' => $gallery['title']])

    <section class="py-16 lg:py-24">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="mb-10 flex items-center justify-between gap-4">
                <a href="{{ route('gallery') }}" class="inline-flex items-center gap-2 text-sm font-medium text-gerg-600 hover:text-gerg-800 transition">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                    Back to Gallery
                </a>
                <p class="text-sm text-slate-500">{{ count($gallery['images']) }} Photos</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                @foreach ($gallery['images'] as $index => $image)
                    <div class="group relative overflow-hidden rounded-2xl shadow-lg">
                        <img
                            src="{{ asset('images/' . $image) }}"
                            alt="{{ $gallery['title'] }} - Image {{ $index + 1 }}"
                            class="h-64 w-full object-cover transition-transform duration-700 group-hover:scale-110"
                            loading="lazy"
                        >
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                            <div class="absolute bottom-0 left-0 right-0 p-5">
                                <p class="text-sm font-medium text-white">Image {{ $index + 1 }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-16 text-center">
                <a href="{{ route('gallery') }}" class="btn-outline-dark inline-flex items-center gap-2">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
                    View All Galleries
                </a>
            </div>
        </div>
    </section>
@endsection