@extends('layouts.frontend')
@section('main-content')
    <section id="galery" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="relative rounded-lg overflow-hidden mb-8">
                <div class="absolute inset-0 bg-cover bg-center"
                    style="background-image: url('{{ asset('assets/admin/images/breadcum.jpg') }}');"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/70 via-yellow-200/30 to-emerald-600/70"></div>

                <div
                    class="relative z-10 max-w-7xl mx-auto px-4 py-5 md:py-9 flex flex-col md:flex-row md:items-center md:justify-between">

                    <div>
                        <h1 class="text-2xl md:text-4xl font-bold text-white">{{ $title }}</h1>
                        <p class="mt-2 text-white/85 max-w-xl">Seputar data {{ $title }}</p>
                    </div>

                    <nav class="text-sm text-white/95 mt-4 md:mt-0" aria-label="Breadcrumb">
                        <ol class="list-reset flex items-center space-x-2 justify-start md:justify-end">
                            <li><a href="{{ url('/') }}" class="hover:underline text-white">Beranda</a></li>
                            <li class="text-white/60">/</li>
                            <li class="text-white font-semibold">{{ $title }}</li>
                        </ol>
                    </nav>

                </div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @foreach ($image_galery as $vimg)
                    <div class="group relative rounded-lg shadow-md overflow-hidden">

                        <img src="{{ asset('storage/uploads/image_page/' . $vimg->source) }}"
                            class="w-full h-full object-cover transition-transform transform group-hover:scale-105"
                            alt="{{ $vimg->title }}">

                        <div
                            class="absolute inset-0 flex flex-col justify-end p-4 
                    bg-gradient-to-t from-black/80 to-transparent
                    opacity-0 group-hover:opacity-100 transition-opacity duration-300">

                            <h3 class="font-semibold text-white text-base md:text-lg">{{ $vimg->title }}</h3>

                            @if (isset($vimg->description) && $vimg->description)
                                <p class="text-sm text-white/90 mt-1 line-clamp-2">{{ $vimg->description }}</p>
                            @endif
                        </div>

                    </div>
                @endforeach
            </div>
            <div class="mt-8 flex justify-center">
                {{ $image_galery->onEachSide(0)->links() }}
            </div>

        </div>
    </section>
@endsection