@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 cursor-zoom-in">
                    <img onclick="openImageModal('{{ asset('storage/uploads/image_page/' . $vimg->source) }}')"
                        src="{{ asset('storage/uploads/image_page/' . $vimg->source) }}"
                        class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105"
                        alt="{{ $vimg->title }}">

                    <div class="mt-2">
                        <h3 class="text-sm font-semibold text-gray-800 ">{{ $vimg->title }}</h3>
                        <p class="text-xs text-gray-600 mt-1 line-clamp-2" title="{{ $vimg->description }}">
                            {{ \Illuminate\Support\Str::limit(strip_tags($vimg->description ?? ''), 100) }}
                        </p>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="mt-8 flex justify-center">
                {{ $image_galery->onEachSide(0)->links() }}
            </div>

        </div>
    </section>

@endsection