<x-main-inner-page 
    category="History" title="Past Conferences" 
    subtitle="Explore our comprehensive archive of global academic events and discover our legacy of knowledge dissemination."
>
<!-- Section Intro -->
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-6">
    <div>
        <span class="text-brand-600 text-xs font-bold uppercase tracking-widest mb-2 block">Events Archive</span>
        <h2 class="text-3xl font-bold text-slate-900">Conferences &amp; Symposia</h2>
        <p class="text-slate-500 mt-2 max-w-2xl">Browse the rich history of our international gatherings, connecting thousands of researchers and scholars worldwide since 2010.</p>
    </div>
    <div class="flex flex-wrap gap-2 shrink-0">
        <button class="px-5 py-2 bg-slate-900 text-white rounded-xl text-sm font-bold">All Events</button>
        <button class="px-5 py-2 bg-white border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:border-brand-400 hover:text-brand-600 transition">2024</button>
        <button class="px-5 py-2 bg-white border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:border-brand-400 hover:text-brand-600 transition">2023</button>
    </div>
</div>

<!-- Conferences Grid (Matching Home Page) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    @php
    $events = [
        ['year'=>'2024','img'=>'1540575467063-178a50c2df87','title'=>'10th International Conference on Business, Management & Economics','location'=>'Barcelona, Spain','date'=>'Jul 12–13, 2024'],
        ['year'=>'2024','img'=>'1517245386807-bb43f82c33c4','title'=>'8th International Conference on Health & Medicine','location'=>'Vienna, Austria','date'=>'Aug 8–9, 2024'],
        ['year'=>'2023','img'=>'1524178232363-1fb2b075b655','title'=>'7th International Conference on Education & Distance Learning','location'=>'Kuala Lumpur, Malaysia','date'=>'Nov 5–6, 2023'],
        ['year'=>'2023','img'=>'1544531586-fde5298cdd40','title'=>'6th International Conference on Social Sciences & Humanities','location'=>'Dubai, UAE','date'=>'Sep 22–23, 2023'],
        ['year'=>'2022','img'=>'1531058020387-3be344556be6','title'=>'5th International Conference on Technology & Innovation','location'=>'Singapore','date'=>'Oct 15–16, 2022'],
        ['year'=>'2022','img'=>'1536895058696-a69b1c7ba34f','title'=>'4th International Conference on Applied Sciences','location'=>'Tokyo, Japan','date'=>'Dec 02–03, 2022'],
        ['year'=>'2021','img'=>'1475721027785-f74eccf877e2','title'=>'3rd International Conference on Environmental Science','location'=>'Sydney, Australia','date'=>'May 12–13, 2021'],
        ['year'=>'2021','img'=>'1558008258-3256797b43f3','title'=>'2nd International Conference on AI & Robotics','location'=>'Berlin, Germany','date'=>'Aug 20–21, 2021'],
    ];
    @endphp

    @foreach($events as $conference)
    <div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group flex flex-col h-full">
        <div class="h-48 overflow-hidden relative">
            <span class="absolute top-3 left-3 bg-brand-600 text-white text-[10px] font-bold px-2 py-1 z-10 rounded shadow-sm">{{ $conference['year'] }}</span>
            <img src="https://images.unsplash.com/photo-{{ $conference['img'] }}?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" 
                alt="{{ $conference['title'] }}"
                class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
        </div>
        <div class="p-5 flex flex-col flex-grow">
            <div class="flex items-center gap-2 text-xs text-slate-500 mb-3">
                <span><i class="far fa-calendar-alt text-brand-500 mr-1"></i>
                    {{ $conference['date'] }}</span>
                <span>•</span>
                <span class="truncate"><i class="fas fa-map-marker-alt text-brand-500 mr-1"></i>
                    {{ $conference['location'] }}</span>
            </div>
            <h3 class="font-bold text-lg text-slate-900 mb-4 flex-grow group-hover:text-brand-600 transition">
                {{ $conference['title'] }}
            </h3>
            <div class="flex justify-between items-center pt-4 border-t border-slate-50">
                <a href="#" class="text-sm font-medium text-white bg-slate-900 hover:bg-brand-600 px-4 py-2.5 rounded-lg transition w-full text-center">
                    View Details
                </a>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="mt-12 text-center">
    <button class="px-8 py-3 bg-white border border-slate-200 text-slate-600 font-bold rounded-xl shadow-sm hover:border-brand-500 hover:text-brand-600 transition-colors text-sm">Load More Conferences</button>
</div>
</x-main-inner-page>