<?php
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Gallery;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-10 font-odia">
    <div class="mb-12">
        <h1 class="text-3xl md:text-5xl font-black text-slate-900 tracking-tight uppercase">
            Visual <span class="text-brand-red">Gallery</span>
        </h1>
        <p class="text-slate-500 max-w-2xl mt-4 text-lg font-bold font-odia leading-relaxed">
            ଓଡ଼ିଶାର କଳା, ସଂସ୍କୃତି ଓ ସୌନ୍ଦର୍ଯ୍ୟର ଏକ ଝଲକ। ଆମ ଗ୍ୟାଲେରୀ ମାଧ୍ୟମରେ ଦେଖନ୍ତୁ ରାଜ୍ୟର ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ମୁହୂର୍ତ୍ତ।
        </p>
    </div>

    @if($images->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($images as $image)
        <div class="group relative news-card-v2 rounded-lg overflow-hidden aspect-[4/5] border border-slate-200">
            <img src="{{ asset('storage/'.$image->image_path) }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                @if($image->category)
                <span class="text-brand-red text-[9px] font-black uppercase tracking-widest mb-1">{{ $image->category->name }}</span>
                @endif
                <h3 class="text-white text-lg font-bold font-odia mb-4">{{ $image->title }}</h3>
                <div class="flex gap-2">
                    <button class="w-8 h-8 bg-white/10 border border-white/20 rounded-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors"><i class="fa-solid fa-expand text-xs"></i></button>
                    <button class="w-8 h-8 bg-white/10 border border-white/20 rounded-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors"><i class="fa-solid fa-share-nodes text-xs"></i></button>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-12">
        {{ $images->links() }}
    </div>
    @else
    <div class="bg-slate-50 p-12 text-center rounded-lg border border-slate-100">
        <p class="text-slate-400 font-odia">No gallery images found.</p>
    </div>
    @endif
</main>