<x-main-inner-page 
    category="About" title="Presenters - Upcoming" 
    subtitle="Explore information regarding Presenters - Upcoming and discover how GARI brings value to the global research community."
>
<!-- Section Intro -->
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-14 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">Meet the Team</h2>
        <p class="text-slate-500 mt-2 max-w-xl">Eminent academics and industry leaders who collaborate to ensure the highest quality of scholarship and conference experience.</p>
    </div>
    <div class="flex items-center gap-2 text-sm text-slate-500 bg-white border border-slate-200 px-4 py-2.5 rounded-xl shadow-sm shrink-0">
        <i class="fas fa-users text-brand-500"></i>
        <span class="font-medium">8 Members Listed</span>
    </div>
</div>

<!-- Profile Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
    @php
    $members = [
        ['img'=>'1573496359142-b8d87734a5a2', 'name'=>'Prof. Sarah Anderson', 'role'=>'Keynote Speaker', 'field'=>'AI & Cognitive Science', 'country'=>'Harvard University, USA'],
        ['img'=>'1560250097-0b93528c311a', 'name'=>'Dr. James Chen', 'role'=>'Co-Chair', 'field'=>'Renewable Energy', 'country'=>'MIT, Singapore'],
        ['img'=>'1580489944761-15a19d654956', 'name'=>'Dr. Emily Williams', 'role'=>'Scientific Reviewer', 'field'=>'Cognitive Science', 'country'=>'Oxford University, UK'],
        ['img'=>'1507003211169-0a1dd7228f2d', 'name'=>'Prof. Michael Brown', 'role'=>'Session Chair', 'field'=>'Cybersecurity', 'country'=>'ETH Zurich, Switzerland'],
        ['img'=>'1573497019940-1c28c88b4f3e', 'name'=>'Dr. Lisa Davis', 'role'=>'Keynote Speaker', 'field'=>'Biotechnology', 'country'=>'Stanford, USA'],
        ['img'=>'1472099645785-5658abf4ff4e', 'name'=>'Prof. Robert Kumar', 'role'=>'Advisory Board', 'field'=>'Economics', 'country'=>'IIT Delhi, India'],
        ['img'=>'1487412720507-e7ab37603c6f', 'name'=>'Dr. Maria Costa', 'role'=>'Co-Chair', 'field'=>'Social Sciences', 'country'=>'University of Lisbon, Portugal'],
        ['img'=>'1500648767791-00dcc994a43e', 'name'=>'Prof. David Lee', 'role'=>'Scientific Committee', 'field'=>'Engineering', 'country'=>'Seoul National University, Korea'],
    ];
    @endphp
    @foreach($members as $m)
    <div class="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">
        <div class="h-52 overflow-hidden relative">
            <img src="https://images.unsplash.com/photo-{{ $m['img'] }}?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
                 alt="{{ $m['name'] }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-900/70 via-transparent to-transparent"></div>
            <span class="absolute bottom-3 left-3 px-3 py-1 bg-brand-600 text-white text-[10px] font-bold uppercase tracking-widest rounded-full">{{ $m['role'] }}</span>
        </div>
        <div class="p-6">
            <h3 class="font-bold text-slate-900 text-lg mb-0.5 group-hover:text-brand-600 transition-colors">{{ $m['name'] }}</h3>
            <p class="text-xs font-semibold text-brand-500 uppercase tracking-wide mb-1">{{ $m['field'] }}</p>
            <p class="text-xs text-slate-400 mb-4 flex items-center gap-1"><i class="fas fa-map-marker-alt"></i> {{ $m['country'] }}</p>
            <div class="flex items-center gap-3 pt-3 border-t border-slate-50">
                <a href="#" class="text-slate-400 hover:text-brand-600 transition-colors text-sm"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="text-slate-400 hover:text-brand-600 transition-colors text-sm"><i class="fab fa-twitter"></i></a>
                <a href="#" class="ml-auto text-xs text-slate-500 hover:text-brand-600 font-semibold transition-colors flex items-center gap-1">Profile <i class="fas fa-arrow-right text-[10px]"></i></a>
            </div>
        </div>
    </div>
    @endforeach
</div>
</x-main-inner-page>