<x-main-inner-page 
    category="History" title="Albums" 
    subtitle="A visual collection capturing the essence of our international conferences, networking sessions, and award ceremonies."
>
<!-- Header & Filters -->
<div class="flex flex-col md:flex-row items-center justify-between gap-6 mb-12">
    <div>
        <h2 class="text-3xl font-bold text-slate-900">Event Albums</h2>
        <p class="text-slate-500 mt-2">Select an album to view all photos from the event.</p>
    </div>
    <div class="flex items-center gap-2 text-slate-500 text-sm font-medium shrink-0 bg-slate-50 px-4 py-2 border border-slate-100 rounded-xl">
        <i class="fas fa-folder-open text-brand-500"></i> over 25+ Albums Available
    </div>
</div>

<!-- Albums Grid -->
@php
$albums = [
    [
        'title' => 'Annual Gala — Austria 2025', 
        'date' => 'Jul 12, 2025', 
        'photos' => 124, 
        'cover' => '1540575467063-178a50c2df87'
    ],
    [
        'title' => 'Health Innovations Summit — Spain 2025', 
        'date' => 'May 05, 2025', 
        'photos' => 86, 
        'cover' => '1517245386807-bb43f82c33c4'
    ],
    [
        'title' => 'Panel Discussion — Malaysia 2024', 
        'date' => 'Nov 20, 2024', 
        'photos' => 150, 
        'cover' => '1524178232363-1fb2b075b655'
    ],
    [
        'title' => 'Award Ceremony — Dubai 2024', 
        'date' => 'Sep 15, 2024', 
        'photos' => 210, 
        'cover' => '1544531586-fde5298cdd40'
    ],
    [
        'title' => 'Workshop Day — Slovenia 2023', 
        'date' => 'Oct 10, 2023', 
        'photos' => 65, 
        'cover' => '1531058020387-3be344556be6'
    ],
    [
        'title' => 'Opening Ceremony — Portugal 2023', 
        'date' => 'Aug 22, 2023', 
        'photos' => 112, 
        'cover' => '1536895058696-a69b1c7ba34f'
    ]
];
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    @foreach($albums as $album)
    <a href="{{ route('main.page', ['category' => 'history', 'page' => 'album-details']) }}" class="group block rounded-2xl bg-white border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden relative">
        <div class="relative h-56 bg-slate-900 overflow-hidden">
            <img src="https://images.unsplash.com/photo-{{ $album['cover'] }}?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                alt="{{ $album['title'] }}" class="w-full h-full object-cover group-hover:scale-110 opacity-90 transition-transform duration-700">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent"></div>
            
            <!-- Photo Count -->
            <div class="absolute bottom-4 right-4 bg-white/20 backdrop-blur-md rounded-full px-3 py-1.5 flex items-center gap-2 text-white border border-white/30 text-xs font-bold">
                <i class="fas fa-images"></i> {{ $album['photos'] }} Photos
            </div>
        </div>
        
        <div class="p-6">
            <div class="flex items-center gap-2 text-xs text-brand-600 font-bold uppercase tracking-widest mb-2">
                <i class="far fa-calendar"></i> {{ $album['date'] }}
            </div>
            <h3 class="text-xl font-bold text-slate-900 group-hover:text-brand-600 transition-colors leading-tight mb-4">{{ $album['title'] }}</h3>
            
            <div class="text-slate-500 font-medium text-sm flex items-center gap-2 group-hover:gap-3 transition-all">
                View Album <i class="fas fa-arrow-right text-brand-500"></i>
            </div>
        </div>
    </a>
    @endforeach
</div>

<!-- Pagination / Load More -->
<div class="text-center mt-12">
    <button class="inline-flex items-center gap-2 px-8 py-3.5 bg-slate-50 text-slate-600 border border-slate-200 font-bold rounded-xl hover:border-brand-500 hover:text-brand-600 transition-all text-sm shadow-sm">
        <i class="fas fa-sync-alt"></i> Load More Albums
    </button>
</div>
</x-main-inner-page>