@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">
        @php 
            // Group speakers by their speaker type
            $speakersByType = $speakers->groupBy('speaker_type_id');
            $speakerTypes = \App\Models\SpeakerType::active()->orderBy('order')->get();
        @endphp
        
        @foreach($speakerTypes as $type)
            @php $typeSpeakers = $speakersByType->get($type->id, collect()); @endphp
            @if($typeSpeakers->count() > 0)
            <div class="mb-16">
                <h2 class="font-serif text-3xl text-gray-900 mb-8 italic">{{ $type->name }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($typeSpeakers 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-96 object-cover object-top">
                            @else
                            <div class="w-full h-96 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-{{ $type->color ?? 'teflin-gold' }}-500 text-white text-xs font-semibold rounded-full">{{ $type->name }}</span>
                        </div>
                        <div class="p-6">
                            <div>
                                <h3 class="font-serif text-lg text-gray-900 mb-1">{{ $speaker->name }}</h3>
                                <p class="text-gray-500">{{ $speaker->title }}</p>
                                <p class="text-gray-500 text-sm">{{ $speaker->institution }}</p>
                                <p class="text-gray-500 text-sm">{{ $speaker->country }}</p>
                            </div>
                            @if($speaker->topic_title)
                            <p class="text-teflin-blue italic text-sm mb-3 mt-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>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        @endforeach

        @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
