<x-conference-layout>
<x-slot name="title">Co-chair & Keynote Speakers – {{ $conference['title'] ?? 'Conference' }}</x-slot>

    {{-- HERO --}}
    <x-conference-inner-hero
    pageTitle="Co-chair & Keynote"
    label="Speakers"
    subtitle="Our distinguished co-chairs and keynote speakers are eminent leaders in their academic disciplines."
/>

<section class="bg-white">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">

        {{-- Intro --}}
        <div class="py-16 border-b border-gray-100">
            <p class="text-xl text-gray-600 font-light leading-relaxed max-w-3xl">
                The {{ $conference['logo_text'] ?? 'conference' }} is anchored by distinguished thought leaders and world-class researchers who set the intellectual agenda for the event.
            </p>
        </div>

        {{-- Dynamic Detailed Speakers List + Alpine Modal --}}
        <div x-data="{ modalOpen: false, selectedSpeaker: null }">
            @if(isset($conference['detailed_speakers']) && is_array($conference['detailed_speakers']))
                @foreach((array)$conference['detailed_speakers'] as $category => $speakers)
                    <div class="py-16 border-b border-gray-100">
                        <p class="text-xs font-bold text-orange-500 tracking-widest uppercase mb-10">{{ $category }}</p>
                        
                        @if(in_array($category, ['Chair', 'Co-Chair']))
                            {{-- Featured Layout for Chairs --}}
                            @foreach((array)$speakers as $speaker)
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-12 last:mb-0">
                                <div class="aspect-[4/3] rounded-2xl overflow-hidden bg-gray-100 relative group">
                                    <img src="{{ $speaker['image'] }}" alt="{{ $speaker['name'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 filter grayscale group-hover:grayscale-0">
                                </div>
                                <div>
                                    <h2 class="text-3xl lg:text-4xl font-bold font-serif text-gray-900 mb-2">{{ $speaker['name'] }}</h2>
                                    <p class="text-orange-500 font-bold text-sm uppercase tracking-wider mb-1">{{ $speaker['role'] }}</p>
                                    <p class="text-gray-400 text-sm mb-6">{{ $speaker['company'] }}</p>
                                    <p class="text-gray-600 leading-relaxed text-base mb-8 line-clamp-3">
                                        {{ $speaker['bio'] ?? '' }}
                                    </p>
                                    <button @click="selectedSpeaker = {{ json_encode($speaker) }}; modalOpen = true" class="inline-flex items-center gap-2 text-sm font-bold text-gray-900 hover:text-orange-600 transition-colors group/btn">
                                        View Full Profile <i class="fas fa-arrow-right text-xs transform group-hover/btn:translate-x-1 transition-transform"></i>
                                    </button>
                                </div>
                            </div>
                            @endforeach
                        @else
                            {{-- Grid Layout for Others --}}
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                @foreach((array)$speakers as $speaker)
                                <div class="flex flex-col bg-gray-50 border border-gray-100 rounded-2xl overflow-hidden hover:border-orange-100 hover:shadow-xl transition-all duration-300 group">
                                    <div class="h-64 w-full bg-gray-200 overflow-hidden relative">
                                        <img src="{{ $speaker['image'] }}" alt="{{ $speaker['name'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 filter grayscale group-hover:grayscale-0">
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                                    </div>
                                    <div class="p-8 flex flex-col flex-1">
                                        <h3 class="text-xl font-bold font-serif text-gray-900 mb-1 group-hover:text-orange-600 transition-colors">{{ $speaker['name'] }}</h3>
                                        <p class="text-orange-500 text-xs font-bold uppercase tracking-wider mb-1">{{ $speaker['role'] }}</p>
                                        <p class="text-gray-400 text-sm mb-6">{{ $speaker['company'] }}</p>
                                        
                                        <div class="mt-auto">
                                            <button @click="selectedSpeaker = {{ json_encode($speaker) }}; modalOpen = true" class="inline-flex justify-between items-center w-full pt-4 border-t border-gray-200 mt-4 text-sm font-bold text-gray-900 hover:text-orange-600 transition-colors group/btn">
                                                More Details <i class="fas fa-arrow-right text-xs transform group-hover/btn:translate-x-1 transition-transform"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endforeach
            @else
                <div class="py-16 border-b border-gray-100 text-center">
                    <p class="text-gray-400 text-sm">Speakers will be announced shortly. Please check back later.</p>
                </div>
            @endif

            {{-- MODAL --}}
            <div x-show="modalOpen" x-cloak class="fixed inset-0 z-[200] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                <!-- Background overlay -->
                <div x-show="modalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" @click="modalOpen = false"></div>

                <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
                    <!-- Modal panel -->
                    <div x-show="modalOpen" @click.stop x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all sm:my-8 w-full sm:max-w-4xl max-h-[90vh] flex flex-col md:flex-row">
                        
                        <!-- Close Button -->
                        <button @click="modalOpen = false" class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-white md:bg-gray-100 text-gray-500 hover:bg-orange-500 hover:text-white shadow md:shadow-none transition-colors z-[20] focus:outline-none">
                            <i class="fas fa-times"></i>
                        </button>

                        <!-- Left: Image Section -->
                        <div class="md:w-2/5 shrink-0 bg-gray-100 h-64 md:h-auto relative overflow-hidden">
                            <template x-if="selectedSpeaker">
                                <img :src="selectedSpeaker.image" alt="Profile" class="absolute inset-0 w-full h-full object-cover">
                            </template>
                        </div>

                        <!-- Right: Details Section -->
                        <div class="p-8 md:p-12 flex-1 overflow-y-auto w-full">
                            <template x-if="selectedSpeaker">
                                <div>
                                    <p class="text-orange-500 font-bold uppercase tracking-wider text-xs mb-2" x-text="selectedSpeaker.role"></p>
                                    <h2 class="text-3xl md:text-4xl font-bold font-serif text-gray-900 mb-2" x-text="selectedSpeaker.name"></h2>
                                    
                                    <div class="mb-8 pb-8 border-b border-gray-100 flex flex-col gap-2">
                                        <p class="text-gray-700 font-medium flex items-center gap-2"><i class="fas fa-building text-gray-400 w-5 text-center"></i> <span x-text="selectedSpeaker.company"></span></p>
                                        <template x-if="selectedSpeaker.university">
                                            <p class="text-gray-600 font-medium text-sm flex items-center gap-2"><i class="fas fa-university text-gray-400 w-5 text-center"></i> <span x-text="selectedSpeaker.university"></span></p>
                                        </template>
                                        <template x-if="selectedSpeaker.education">
                                            <p class="text-gray-500 font-medium text-sm flex items-start gap-2 pt-1"><i class="fas fa-graduation-cap text-gray-400 w-5 text-center mt-0.5"></i> <span x-text="selectedSpeaker.education" class="whitespace-pre-line leading-snug"></span></p>
                                        </template>
                                    </div>
                                    
                                    <div class="prose prose-sm md:prose-base max-w-none text-gray-600 leading-relaxed font-light">
                                        <div class="inline-flex items-center gap-3 mb-6">
                                            <span class="h-px w-8 bg-orange-500"></span>
                                            <span class="text-gray-900 font-bold tracking-widest text-xs uppercase">Biography</span>
                                        </div>
                                        <p x-text="selectedSpeaker.bio || 'Detailed biography is not available at this moment. Please check back soon.'"></p>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- CTA --}}
        <div class="py-16">
            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-10 md:p-14 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden">
                <div class="absolute left-0 top-0 bottom-0 w-1 bg-orange-500 rounded-l-2xl"></div>
                <div class="md:max-w-xl">
                    <h3 class="text-2xl font-bold font-serif text-gray-900 mb-2">Interested in speaking at the conference?</h3>
                    <p class="text-gray-500 text-sm leading-relaxed">Qualified researchers with a strong publication record are invited to express interest in keynote or panel speaking opportunities.</p>
                </div>
                <a href="{{ route('conference.contact-us', $conference['slug']) }}" class="shrink-0 px-8 py-4 bg-gray-900 hover:bg-orange-600 text-white font-bold text-sm rounded-xl transition-colors uppercase tracking-wide">
                    Contact Us
                </a>
            </div>
        </div>

    </div>
</section>

</x-conference-layout>
