@extends('layouts.app')

@section('title', 'Conference Speakers')

@section('content')
<!-- Hero Section -->
<section class="relative bg-gradient-to-b from-teflin-blue to-teflin-blue-light overflow-hidden py-16">
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl text-white mb-4 italic">Conference Speakers</h1>
        <p class="text-white/80 text-lg max-w-2xl mx-auto">Learn from world-renowned experts in English Language Teaching and Applied Linguistics.</p>
    </div>
</section>

<!-- Speakers Content -->
<section class="bg-gray-50 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Keynote Speakers -->
        @php $keynoteSpeakers = $speakers->where('type', 'keynote'); @endphp
        @if($keynoteSpeakers->count() > 0)
        <div class="mb-16">
            <h2 class="font-serif text-3xl text-gray-900 mb-8 italic">Keynote Speakers</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @foreach($keynoteSpeakers as $speaker)
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="relative">
                        @if($speaker->photo)
                        <img src="{{ asset('uploads/' . $speaker->photo) }}" alt="{{ $speaker->name }}" class="w-full h-72 object-cover object-top">
                        @else
                        <div class="w-full h-72 bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center">
                            <span class="text-6xl font-bold text-white">{{ substr($speaker->name, 0, 1) }}</span>
                        </div>
                        @endif
                        <span class="absolute top-4 right-4 px-3 py-1 bg-teflin-blue text-white text-xs font-semibold rounded-full">Keynote Speaker</span>
                    </div>
                    <div class="p-6">
                        <h3 class="font-serif text-xl text-gray-900 mb-1">{{ $speaker->name }}</h3>
                        <p class="text-gray-500 text-sm mb-3">{{ $speaker->institution }}{{ $speaker->country ? ', ' . $speaker->country : '' }}</p>
                        @if($speaker->topic_title)
                        <p class="text-teflin-blue italic text-sm mb-3">"{{ $speaker->topic_title }}"</p>
                        @endif
                        @if($speaker->bio)
                        <p class="text-gray-600 text-sm mb-4">{{ Str::limit($speaker->bio, 120) }}</p>
                        @endif
                        <div class="flex gap-3">
                            <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></a>
                            <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
                            <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Plenary Speakers -->
        @php $plenarySpeakers = $speakers->where('type', 'plenary'); @endphp
        @if($plenarySpeakers->count() > 0)
        <div class="mb-16">
            <h2 class="font-serif text-3xl text-gray-900 mb-8 italic">Plenary Speakers</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($plenarySpeakers as $speaker)
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="relative">
                        @if($speaker->photo)
                        <img src="{{ asset('uploads/' . $speaker->photo) }}" alt="{{ $speaker->name }}" class="w-full h-64 object-cover object-top">
                        @else
                        <div class="w-full h-64 bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center">
                            <span class="text-5xl font-bold text-white">{{ substr($speaker->name, 0, 1) }}</span>
                        </div>
                        @endif
                        <span class="absolute top-4 right-4 px-3 py-1 bg-teflin-gold text-teflin-blue-dark text-xs font-semibold rounded-full">Plenary Speaker</span>
                    </div>
                    <div class="p-6">
                        <h3 class="font-serif text-lg text-gray-900 mb-1">{{ $speaker->name }}</h3>
                        <p class="text-gray-500 text-sm mb-3">{{ $speaker->institution }}{{ $speaker->country ? ', ' . $speaker->country : '' }}</p>
                        @if($speaker->topic_title)
                        <p class="text-teflin-blue italic text-sm mb-3">"{{ $speaker->topic_title }}"</p>
                        @endif
                        @if($speaker->bio)
                        <p class="text-gray-600 text-sm mb-4">{{ Str::limit($speaker->bio, 100) }}</p>
                        @endif
                        <div class="flex gap-3">
                            <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></a>
                            <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
                            <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Featured Speakers -->
        @php $featuredSpeakers = $speakers->whereIn('type', ['invited', 'featured']); @endphp
        @if($featuredSpeakers->count() > 0)
        <div class="mb-16">
            <h2 class="font-serif text-3xl text-gray-900 mb-8 italic">Featured Speakers</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($featuredSpeakers as $speaker)
                <div class="bg-white rounded-2xl shadow-sm p-6 text-center">
                    <div class="relative inline-block mb-4">
                        @if($speaker->photo)
                        <img src="{{ asset('uploads/' . $speaker->photo) }}" alt="{{ $speaker->name }}" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-gray-100">
                        @else
                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center mx-auto border-4 border-gray-100">
                            <span class="text-2xl font-bold text-white">{{ substr($speaker->name, 0, 1) }}</span>
                        </div>
                        @endif
                    </div>
                    <span class="inline-block px-3 py-1 bg-teflin-blue text-white text-xs font-semibold rounded-full mb-3">Featured Speaker</span>
                    <h3 class="font-serif text-lg text-gray-900 mb-1">{{ $speaker->name }}</h3>
                    <p class="text-gray-500 text-sm mb-3">{{ $speaker->institution }}{{ $speaker->country ? ', ' . $speaker->country : '' }}</p>
                    @if($speaker->topic_title)
                    <p class="text-teflin-blue italic text-sm mb-3">"{{ $speaker->topic_title }}"</p>
                    @endif
                    <div class="flex justify-center gap-3">
                        <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></a>
                        <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
                        <a href="#" class="text-gray-400 hover:text-teflin-blue transition"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg></a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        @if($speakers->count() === 0)
        <div class="bg-white rounded-2xl shadow-sm p-12 text-center text-gray-500">
            <p>Speaker information coming soon...</p>
        </div>
        @endif
    </div>
</section>

<!-- Program at a Glance CTA -->
<section class="bg-gradient-to-b from-teflin-blue to-teflin-blue-dark py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-serif text-3xl text-white mb-4 italic">Program at a Glance</h2>
        <p class="text-white/80 mb-8">View the full conference schedule and plan your sessions.</p>
        <a href="{{ route('speakers', 'schedule') }}" class="inline-flex items-center px-8 py-3 bg-teflin-gold text-teflin-blue-dark font-semibold rounded-full hover:bg-teflin-gold-light transition">
            View Full Program
        </a>
    </div>
</section>
@endsection
