@extends('layouts.app')

@section('title', 'Photo Gallery and Updates - Frantyapp Media')
@section('meta_description', 'Explore photo albums of Frantyapp site inspections, client title handover events, and landmark project developments in Abuja and Lagos.')

@section('content')
<div class="bg-black text-white py-16 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Media Archives</span>
        <div class="w-12 h-[2px] bg-brand-blue mx-auto mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl mt-2">Gallery and Media Updates</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Visual records of physical site inspections, AGIS title search verification, and client title handover ceremonies.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        @foreach($galleries as $item)
            <div data-aos="fade-up" class="border border-gray-200 bg-white overflow-hidden group">
                <div class="relative h-64 overflow-hidden bg-black">
                    <img src="{{ asset($item->image) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                    <span class="absolute top-3 left-3 bg-black text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1">
                        {{ $item->category }}
                    </span>
                </div>
                <div class="p-6 space-y-2">
                    <h3 class="font-serif-heading font-bold text-lg text-black">{{ $item->title }}</h3>
                    <p class="text-gray-500 text-xs font-light leading-relaxed">{{ $item->description }}</p>
                    <span class="text-[10px] text-gray-400 font-semibold block pt-2">{{ $item->created_at->format('M d, Y') }}</span>
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-10">
        {{ $galleries->links() }}
    </div>

</div>
@endsection
