<x-main-inner-page 
    category="History" title="Past Speakers" 
    subtitle="Eminent academics and industry leaders who have shared their expertise at our international conferences."
>
<!-- 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">Our Experts</span>
        <h2 class="text-3xl font-bold text-slate-900">Keynote & Plenary Speakers</h2>
        <p class="text-slate-500 mt-2 max-w-2xl">Renowned thought leaders who have presented visionary frameworks and actionable insights to drive global academic progress.</p>
    </div>
    <div class="flex items-center gap-2">
        <select class="form-select bg-white border-slate-200 text-slate-700 font-medium text-sm rounded-xl px-4 py-2 hover:border-brand-400 focus:ring-brand-500 transition-all outline-none shadow-sm">
            <option>All Disciplines</option>
            <option>Business & Economics</option>
            <option>Health & Medicine</option>
            <option>Education</option>
            <option>Social Sciences</option>
        </select>
    </div>
</div>

<!-- Profile Grid (Matching Home Page) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6 gap-6">
    @php
    $speakers = [
        ['img'=>'1573496359142-b8d87734a5a2', 'name'=>'Prof. Sarah Anderson', 'field'=>'AI & Cognitive Science', 'country'=>'Harvard University, USA'],
        ['img'=>'1560250097-0b93528c311a', 'name'=>'Dr. James Chen', 'field'=>'Renewable Energy', 'country'=>'MIT, Singapore'],
        ['img'=>'1580489944761-15a19d654956', 'name'=>'Dr. Emily Williams', 'field'=>'Cognitive Science', 'country'=>'Oxford University, UK'],
        ['img'=>'1507003211169-0a1dd7228f2d', 'name'=>'Prof. Michael Brown', 'field'=>'Cybersecurity', 'country'=>'ETH Zurich, Switzerland'],
        ['img'=>'1573497019940-1c28c88b4f3e', 'name'=>'Dr. Lisa Davis', 'field'=>'Biotechnology', 'country'=>'Stanford, USA'],
        ['img'=>'1472099645785-5658abf4ff4e', 'name'=>'Prof. Robert Kumar', 'field'=>'Economics', 'country'=>'IIT Delhi, India'],
        ['img'=>'1487412720507-e7ab37603c6f', 'name'=>'Dr. Maria Costa', 'field'=>'Social Sciences', 'country'=>'University of Lisbon, Portugal'],
        ['img'=>'1500648767791-00dcc994a43e', 'name'=>'Prof. David Lee', 'field'=>'Engineering', 'country'=>'Seoul National University, Korea'],
    ];
    @endphp
    @foreach($speakers as $s)
    <div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-100 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group">
        <div class="h-48 overflow-hidden">
            <img src="https://images.unsplash.com/photo-{{ $s['img'] }}?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
                alt="{{ $s['name'] }}"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
        </div>
        <div class="p-5">
            <h3 class="font-bold text-slate-900 text-lg mb-1 group-hover:text-brand-600 transition">{{ $s['name'] }}</h3>
            <div class="text-xs font-semibold text-brand-600 uppercase tracking-wide mb-3">{{ $s['field'] }}</div>

            <div>
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Affiliation</div>
                <p class="text-slate-600 text-xs leading-relaxed"><i class="fas fa-university text-slate-300 mr-1"></i> {{ $s['country'] }}</p>
            </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 Speakers</button>
</div>
</x-main-inner-page>