@extends('layouts.site')
@section('title', $event->title.' — Past Summit Details')
@section('meta_description', $event->meta_description ?: 'Relive the highlights of '.$event->title.'.')

@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 reveal">
    <div class="grid md:grid-cols-12 gap-8 items-center">
      <div class="md:col-span-7 lg:col-span-8">
        <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Past Summit</span>
        <h1 class="font-display-xl text-display-xl-mobile md:text-display-xl text-white mb-4">{{ $event->title }}</h1>
        @if($event->theme)<p class="font-editorial-quote text-xl md:text-2xl italic text-tertiary mb-6">"{{ $event->theme }}"</p>@endif
        <div class="flex flex-wrap gap-3">
          @if($event->starts_at)<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 flex items-center gap-1.5"><span class="material-symbols-outlined text-sm">calendar_today</span>{{ $event->starts_at->format('M d, Y') }}</span>@endif
          @if($event->city)<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 flex items-center gap-1.5"><span class="material-symbols-outlined text-sm">location_on</span>{{ $event->city }}</span>@endif
          @if($event->venue)<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 flex items-center gap-1.5"><span class="material-symbols-outlined text-sm">venue</span>{{ $event->venue }}</span>@endif
        </div>
        <div class="flex flex-wrap gap-4 mt-6">
          <a href="{{ route('gallery') }}" 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 inline-flex items-center gap-2"><span class="material-symbols-outlined text-sm">photo_library</span> View Gallery</a>
          @if($event->speakers->isNotEmpty())<a href="#speakers" class="border border-border-subtle text-white px-6 py-3 rounded-xl font-bold text-sm hover:bg-white/10 transition-all inline-flex items-center gap-2"><span class="material-symbols-outlined text-sm">group</span> Explore Speakers</a>@endif
        </div>
      </div>
      <div class="md:col-span-5 lg:col-span-4">
        @if($event->cardImageUrl)
        <img src="{{ asset('storage/'.$event->cardImageUrl) }}" alt="{{ $event->title }}" class="rounded-2xl w-full border border-border-subtle"/>
        @else
        <div class="rounded-2xl bg-surface-elevation-1 border border-border-subtle p-10 text-center min-h-[250px] flex items-center justify-center">
          <span class="material-symbols-outlined text-5xl text-muted/30">event</span>
        </div>
        @endif
      </div>
    </div>
  </div>
</section>

{{-- Event Overview --}}
@if($event->description)
<section class="max-w-4xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-6">Event Overview</h2>
  <div class="text-on-surface-variant text-[17px] leading-relaxed">{!! $event->description !!}</div>
</section>
@endif

{{-- Key Numbers --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Key Numbers</h2>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    @php $stats = \App\Models\Stat::active()->get() @endphp
    @forelse($stats as $s)
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle text-center hover:border-primary/30 transition-all">
      <div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">{{ $s->value }}{{ $s->suffix }}</div>
      <div class="text-on-surface-variant text-sm mt-2">{{ $s->label }}</div>
    </div>
    @empty
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle text-center"><div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">{{ $event->speakers->count() }}+</div><div class="text-on-surface-variant text-sm mt-2">Speakers</div></div>
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle text-center"><div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">900+</div><div class="text-on-surface-variant text-sm mt-2">Attendees</div></div>
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle text-center"><div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">10+</div><div class="text-on-surface-variant text-sm mt-2">Sessions</div></div>
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle text-center"><div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">30+</div><div class="text-on-surface-variant text-sm mt-2">Institutions</div></div>
    @endforelse
  </div>
</section>

{{-- Event Highlights --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Event Highlights</h2>
  <div class="grid md:grid-cols-3 gap-6">
    @foreach([['mic','Keynote Sessions','Major keynote addresses and summit moments by distinguished speakers and thought leaders.'],['forum','Panel Discussions','Expert panels featuring cross-disciplinary dialogue and audience conversations.'],['diversity_3','Audience Engagement','Interactive Q&A sessions, reflections, and networking opportunities.']] as $h)
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/30 transition-all group">
      <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary transition-colors"><span class="material-symbols-outlined text-primary group-hover:text-white">{{ $h[0] }}</span></div>
      <h3 class="font-bold text-white text-lg mb-2">{{ $h[1] }}</h3>
      <p class="text-on-surface-variant text-sm">{{ $h[2] }}</p>
    </div>
    @endforeach
  </div>
</section>

{{-- Featured Speakers --}}
@if($event->speakers->isNotEmpty())
<section id="speakers" class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Featured Speakers</h2>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
    @foreach($event->speakers as $sp)
    <a href="{{ route('speakers.show', $sp) }}" class="group rounded-2xl overflow-hidden border border-border-subtle bg-surface-elevation-1 hover:border-primary/40 transition-all">
      @if($sp->photo)<img src="{{ asset('storage/'.$sp->photo) }}" alt="{{ $sp->name }}" class="aspect-square w-full object-cover group-hover:scale-105 transition-transform duration-500"/>@else<div class="aspect-square w-full bg-surface-container grid place-items-center"><span class="material-symbols-outlined text-4xl text-muted/40">person</span></div>@endif
      <div class="p-4"><h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors">{{ $sp->name }}</h3>@if($sp->country)<p class="text-on-surface-variant text-xs mt-0.5">{{ $sp->country }}</p>@endif</div>
    </a>
    @endforeach
  </div>
</section>
@endif

{{-- Gallery --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Event Gallery</h2>
  <div class="grid md:grid-cols-3 gap-6">
    @for($i = 0; $i < 3; $i++)
    <a href="{{ route('gallery') }}" class="group rounded-2xl overflow-hidden border border-border-subtle bg-surface-elevation-1 hover:border-primary/40 transition-all">
      <div class="aspect-video bg-surface-container flex items-center justify-center">
        <span class="material-symbols-outlined text-4xl text-muted/30">photo_library</span>
      </div>
      <div class="p-4"><h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors text-center">View Photos</h3></div>
    </a>
    @endfor
  </div>
  <div class="text-center mt-6"><a href="{{ route('gallery') }}" class="inline-flex items-center gap-2 text-primary font-bold text-sm hover:gap-3 transition-all">View All Gallery Photos <span class="material-symbols-outlined text-sm">arrow_forward</span></a></div>
</section>

{{-- Media Coverage --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Media Coverage</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
    @php $coverage = glob(public_path('images/media-coverage/m*.jpeg')); $coverage = array_slice($coverage, 0, 10) @endphp
    @foreach($coverage as $idx => $path)
    <div class="rounded-xl overflow-hidden border border-border-subtle bg-surface-elevation-1 group cursor-pointer">
      <div class="aspect-[4/4.3] overflow-hidden bg-surface-container">
        @php $name = basename($path) @endphp
        <img src="{{ asset('images/media-coverage/'.$name) }}" alt="Press" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy"/>
      </div>
    </div>
    @endforeach
  </div>
  <div class="text-center mt-6"><a href="{{ route('media-coverage') }}" class="inline-flex items-center gap-2 text-primary font-bold text-sm hover:gap-3 transition-all">View Full Coverage <span class="material-symbols-outlined text-sm">arrow_forward</span></a></div>
</section>

{{-- Timetable --}}
@if($event->schedule)
<section class="max-w-4xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Event Schedule</h2>
  <div class="rounded-2xl overflow-hidden border border-border-subtle">
    @foreach($event->schedule as $idx => $slot)
    <div class="flex items-start gap-4 p-4 {{ !$loop->last ? 'border-b border-border-subtle' : '' }} hover:bg-surface-container/30 transition-colors">
      <div class="min-w-[70px]"><span class="text-primary font-bold text-sm">{{ $slot['time'] ?? '' }}</span></div>
      <div class="flex-1 min-w-0">
        <h4 class="text-white font-semibold text-sm">{{ $slot['title'] ?? '' }}</h4>
        @if(!empty($slot['speaker']))<p class="text-on-surface-variant text-xs mt-0.5">{{ $slot['speaker'] }}</p>@endif
      </div>
      <div class="text-right flex-shrink-0"><span class="text-xs px-2.5 py-1 rounded-full bg-surface-container text-on-surface-variant">{{ $loop->even ? 'Main Hall' : 'Breakout Room' }}</span></div>
    </div>
    @endforeach
  </div>
</section>
@endif

{{-- Resources --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Downloadable Resources</h2>
  <div class="grid md:grid-cols-3 gap-6">
    @foreach([['description','Event Report','Comprehensive report of the summit proceedings and outcomes.'],['image','Photo Archive','High-resolution images from the event.'],['menu_book','Research Papers','Selected papers and abstracts from the summit.']] as $r)
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/30 transition-all group">
      <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary transition-colors"><span class="material-symbols-outlined text-primary group-hover:text-white">{{ $r[0] }}</span></div>
      <h3 class="font-bold text-white text-lg mb-2">{{ $r[1] }}</h3>
      <p class="text-on-surface-variant text-sm mb-4">{{ $r[2] }}</p>
      <span class="text-primary text-sm font-semibold inline-flex items-center gap-1 group-hover:gap-2 transition-all">Coming Soon <span class="material-symbols-outlined text-sm">arrow_forward</span></span>
    </div>
    @endforeach
  </div>
</section>

{{-- CTA --}}
<section class="max-w-3xl mx-auto px-margin-mobile pb-stack-xl reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-10 text-center">
    <span class="material-symbols-outlined text-5xl text-primary mb-4">campaign</span>
    <h3 class="font-headline-lg text-2xl text-white mb-3">Media Inquiries</h3>
    <p class="text-on-surface-variant mb-8 max-w-md mx-auto">For press passes, interview requests, or media collaboration, contact our communications team.</p>
    <div class="flex flex-wrap justify-center gap-4">
      <a href="{{ route('contact') }}" class="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">Contact Us</a>
      <a href="{{ route('media.index') }}" class="border border-border-subtle text-white px-8 py-4 rounded-xl font-bold hover:bg-white/10 transition-all">Media Resources</a>
    </div>
  </div>
</section>

@endsection