@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('speakers_meta_title', 'Speakers — Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('speakers_meta_description', 'Browse our combined speaker roster from previous and current editions.'))

@section('content')

{{-- Hero --}}
<section class="relative pt-28 pb-12 md:py-28 px-margin-mobile overflow-hidden">
  <div class="absolute inset-0 z-0">
    <div class="absolute -top-20 right-0 h-96 w-96 rounded-full bg-primary/5 blur-3xl"></div>
    <div class="absolute bottom-0 left-1/4 h-64 w-64 rounded-full bg-tertiary/5 blur-3xl"></div>
  </div>
  <div class="max-w-5xl mx-auto relative z-10">
    <div class="grid md:grid-cols-12 gap-8 items-center reveal">
      <div class="md:col-span-7 lg:col-span-8">
        <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Voices of the Summit</span>
        <x-heading key="speakers_heading" tag="h1" default="FFS Speakers" class="font-display-xl text-white mb-6" />
        <p class="font-body-lg text-on-surface-variant max-w-lg mb-6">A combined speaker roster from previous and current editions — scholars, researchers, and thought leaders from across the globe.</p>
        <div class="flex flex-wrap gap-3">
          <span class="px-3 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase border border-border-subtle bg-surface-elevation-1 text-on-surface-variant">Past + Current Speakers</span>
        </div>
        @if($speakers->isNotEmpty())
        <div class="flex flex-wrap gap-4 mt-6">
          <a href="#grid" class="bg-primary text-white px-6 py-3 rounded-xl font-bold text-sm hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">View Speaker Grid</a>
        </div>
        @endif
      </div>
      <div class="md:col-span-5 lg:col-span-4">
        <div class="rounded-2xl bg-surface-elevation-1 border border-border-subtle p-10 text-center min-h-[280px] flex items-center justify-center">
          <div>
            <span class="material-symbols-outlined text-5xl text-primary/40 block mb-4">groups</span>
            <p class="text-on-surface-variant text-sm">{{ $speakers->count() }} Speakers</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- Speaker Grid --}}
<section id="grid" class="max-w-7xl mx-auto px-margin-mobile pb-stack-xl">
  @if($speakers->isEmpty())
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-16 text-center reveal">
    <span class="material-symbols-outlined text-7xl text-muted/30 block mb-4">groups</span>
    <h2 class="font-headline-lg text-2xl text-white mb-3">Speakers Coming Soon</h2>
    <p class="text-on-surface-variant mb-8 max-w-md mx-auto">Our speaker lineup is being curated. Stay tuned for announcements.</p>
    <a href="{{ route('summit-updates') }}" class="inline-flex items-center gap-2 bg-primary text-white px-8 py-4 rounded-xl font-bold">Get Updates <span class="material-symbols-outlined">arrow_forward</span></a>
  </div>
  @else
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 reveal">Speaker Cards Grid</h2>
  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
    @foreach($speakers as $sp)
    <div class="reveal rounded-2xl border border-border-subtle bg-surface-elevation-1 overflow-hidden group hover:border-primary/40 transition-all">
      <a href="{{ route('speakers.show', $sp) }}" class="block">
        @if($sp->photo)
        <img src="{{ asset('storage/'.$sp->photo) }}" alt="{{ $sp->name }}" class="aspect-square w-full object-cover transition duration-300 group-hover:scale-105"/>
        @else
        <div class="aspect-square w-full bg-surface-container grid place-items-center">
          <span class="material-symbols-outlined text-5xl text-muted/40">person</span>
        </div>
        @endif
      </a>
      <div class="p-5">
        <a href="{{ route('speakers.show', $sp) }}">
          <h3 class="font-bold text-white group-hover:text-primary transition-colors">{{ $sp->name }}</h3>
        </a>
        <p class="mt-1 text-sm text-on-surface-variant">
          {{ collect([$sp->country, $sp->role])->filter()->join(' · ') }}
        </p>
        <a href="{{ route('speakers.show', $sp) }}" class="mt-3 inline-block text-xs font-semibold text-primary group-hover:translate-x-1 transition-transform">View Profile →</a>
      </div>
    </div>
    @endforeach
  </div>
  @endif
</section>

{{-- CTA --}}
@if($speakers->isNotEmpty())
<section class="max-w-4xl mx-auto px-margin-mobile pb-stack-xl reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-10 md:p-14 text-center">
    <span class="material-symbols-outlined text-5xl text-primary mb-4">person_add</span>
    <x-heading key="speakers_cta_heading" default="Want to Become a Speaker?" class="font-headline-lg text-white mb-3" />
    <p class="text-on-surface-variant mb-8 max-w-lg mx-auto">Are you a scholar, researcher, or thought leader? Apply to join our distinguished speaker lineup.</p>
    <div class="flex flex-wrap justify-center gap-4">
      <a href="{{ route('schedule-session') }}" class="inline-flex items-center gap-2 bg-primary text-white px-8 py-4 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Apply as Speaker <span class="material-symbols-outlined">arrow_forward</span></a>
      <a href="{{ route('contact') }}" class="inline-flex items-center gap-2 border border-border-subtle text-white px-8 py-4 rounded-xl font-bold hover:bg-white/10 transition-all">Contact Us</a>
    </div>
  </div>
</section>
@endif

@endsection