@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('past_summits_meta_title', 'Past Summits - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('past_summits_meta_description', 'Explore past summits of the Faith & Future Summit.'))
@section('breadcrumbs', '[{"name":"Past Summits"}]')

@section('content')
<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 text-center reveal">
    <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Legacy</span>
    <x-heading key="past_summits_heading" tag="h1" default="Past Summits" class="font-headline-lg text-white mb-4" />
    <p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">Relive the moments that defined our journey — every edition, every breakthrough.</p>
  </div>
</section>

{{-- Stats Strip --}}
@php $stats = \App\Models\Stat::active()->get() @endphp
<section class="max-w-container-max mx-auto px-margin-mobile pb-stack-xl">
  @if($stats->isNotEmpty())
  <div class="grid grid-cols-2 md:grid-cols-4 gap-6 reveal">
    @foreach($stats as $s)
    <div class="text-center p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/30 transition-all">
      <div class="font-display-xl text-4xl 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>
    @endforeach
  </div>
  @else
  <div class="grid grid-cols-2 md:grid-cols-4 gap-6 reveal">
    @foreach([['value'=>'02','label'=>'Past Summits'],['value'=>'50+','label'=>'Speakers'],['value'=>'900+','label'=>'Attendees'],['value'=>'02','label'=>'Venues']] as $st)
    <div class="text-center p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle">
      <div class="font-display-xl text-4xl md:text-5xl text-primary font-extrabold">{{ $st['value'] }}</div>
      <div class="text-on-surface-variant text-sm mt-2">{{ $st['label'] }}</div>
    </div>
    @endforeach
  </div>
  @endif
</section>

{{-- Past Summit Cards --}}
@php $pastEvents = \App\Models\Event::past()->get() @endphp
<section class="max-w-container-max mx-auto px-margin-mobile pb-stack-xl">
  @if($pastEvents->isEmpty())
  <div class="text-center py-20 reveal">
    <span class="material-symbols-outlined text-7xl text-muted/30">history</span>
    <p class="mt-6 text-on-surface-variant text-lg">Past summits will be listed here after each edition.</p>
  </div>
  @else
  <div class="space-y-8">
    @foreach($pastEvents as $ev)
    <div class="reveal grid lg:grid-cols-5 gap-8 rounded-2xl border border-border-subtle bg-surface-elevation-1 overflow-hidden group hover:border-primary/30 transition-all duration-500">
      <div class="lg:col-span-2 relative min-h-[250px] lg:min-h-full overflow-hidden">
        @if($ev->cardImageUrl)
        <div class="absolute inset-0 w-full h-full group-hover:scale-105 transition-transform duration-700">
          <img src="{{ asset('storage/'.$ev->cardImageUrl) }}" alt="{{ $ev->title }}" class="absolute inset-0 w-full h-full object-cover"/>
          <div class="absolute inset-0 bg-gradient-to-r from-transparent to-surface-elevation-1/80"></div>
        </div>
        @else
        <div class="absolute inset-0 bg-surface-container grid place-items-center"><span class="material-symbols-outlined text-6xl text-muted">event</span></div>
        @endif
      </div>
      <div class="lg:col-span-3 p-8 lg:p-10 flex flex-col justify-center">
        @if($ev->edition_label)
        <span class="inline-block rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary self-start mb-4">{{ $ev->edition_label }}</span>
        @endif
        <h2 class="font-display-xl text-3xl md:text-4xl text-white mb-3 group-hover:text-primary transition-colors">{{ $ev->title }}</h2>
        @if($ev->theme)
        <p class="font-editorial-quote text-xl italic text-tertiary mb-4">&#8220;{{ $ev->theme }}&#8221;</p>
        @endif
        <p class="text-on-surface-variant leading-relaxed mb-6">{{ $ev->excerpt }}</p>
        <div class="flex flex-wrap gap-3 mb-6">
          @if($ev->starts_at)
          <span class="flex items-center gap-2 text-sm text-on-surface-variant">
            <span class="material-symbols-outlined text-primary text-lg">calendar_today</span> {{ $ev->starts_at->format('F d, Y') }}
          </span>
          @endif
          @if($ev->venue)
          <span class="flex items-center gap-2 text-sm text-on-surface-variant">
            <span class="material-symbols-outlined text-primary text-lg">location_on</span> {{ $ev->venue }}
          </span>
          @endif
          @if($ev->speakers_count)
          <span class="flex items-center gap-2 text-sm text-on-surface-variant">
            <span class="material-symbols-outlined text-primary text-lg">group</span> {{ $ev->speakers_count }} speakers
          </span>
          @endif
        </div>
        <a href="{{ $ev->detailUrl }}" class="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">
          View Details <span class="material-symbols-outlined">arrow_forward</span>
        </a>
      </div>
    </div>
    @endforeach
  </div>
  @endif
</section>

{{-- Past Summit Cards Grid --}}
@if($pastEvents->isNotEmpty())
<section class="max-w-container-max mx-auto px-margin-mobile pb-stack-xl">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center reveal">All Editions</h2>
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach($pastEvents as $ev)
    <a href="{{ $ev->detailUrl }}" class="group rounded-2xl border border-border-subtle bg-surface-elevation-1 overflow-hidden hover:border-primary/30 transition-all duration-500 reveal">
      <div class="aspect-video relative overflow-hidden">
        @if($ev->cardImageUrl)
        <img src="{{ asset('storage/'.$ev->cardImageUrl) }}" alt="{{ $ev->title }}" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"/>
        @else
        <div class="absolute inset-0 bg-surface-container grid place-items-center"><span class="material-symbols-outlined text-5xl text-muted/30">event</span></div>
        @endif
        <div class="absolute inset-0 bg-gradient-to-t from-surface-elevation-1/90 via-transparent to-transparent"></div>
        <div class="absolute bottom-4 left-4 right-4">
          @if($ev->edition_label)
          <span class="inline-block rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary mb-2">{{ $ev->edition_label }}</span>
          @endif
          <h3 class="font-bold text-white text-lg group-hover:text-primary transition-colors">{{ $ev->title }}</h3>
        </div>
      </div>
      <div class="p-5">
        @if($ev->theme)
        <p class="text-sm text-tertiary mb-2 italic">Theme: {{ $ev->theme }}</p>
        @endif
        <div class="flex flex-wrap items-center gap-3 text-xs text-on-surface-variant mb-4">
          @if($ev->starts_at)
          <span class="flex items-center gap-1"><span class="material-symbols-outlined text-primary text-sm">calendar_today</span> {{ $ev->starts_at->format('F, Y') }}</span>
          @endif
          @if($ev->venue)
          <span class="flex items-center gap-1"><span class="material-symbols-outlined text-primary text-sm">location_on</span> {{ $ev->venue }}</span>
          @endif
        </div>
        <span class="inline-flex items-center gap-1.5 text-primary font-bold text-sm group-hover:gap-2.5 transition-all">View Highlights <span class="material-symbols-outlined text-sm">arrow_forward</span></span>
      </div>
    </a>
    @endforeach
  </div>
</section>
@endif

{{-- Gallery Preview --}}
@php $pastGallery = \App\Models\EventImage::whereHas('event', fn($q) => $q->past())->inRandomOrder()->take(8)->get() @endphp
<section class="max-w-container-max mx-auto px-margin-mobile pb-stack-xl">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center reveal">Gallery Preview</h2>
  @if($pastGallery->isNotEmpty())
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 reveal">
    @foreach($pastGallery as $gi)
    <div class="aspect-[4/3] rounded-xl overflow-hidden border border-border-subtle bg-surface-elevation-1 group cursor-pointer">
      <img src="{{ asset('storage/'.$gi->image_path) }}" alt="Gallery" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy"/>
    </div>
    @endforeach
  </div>
  @else
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 reveal">
    @for($i = 1; $i <= 4; $i++)
    <div class="aspect-[4/3] rounded-xl overflow-hidden border border-border-subtle bg-surface-elevation-1 flex items-center justify-center group">
      <div class="text-center">
        <span class="material-symbols-outlined text-4xl text-muted/30 group-hover:text-primary/50 transition-colors">photo_library</span>
        <p class="text-xs text-muted/40 mt-2">Photo {{ $i }}</p>
      </div>
    </div>
    @endfor
  </div>
  @endif
</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 md:p-16 text-center">
    <span class="material-symbols-outlined text-5xl text-primary mb-4">celebration</span>
    <h2 class="font-headline-lg text-2xl md:text-3xl text-white mb-4">Want to attend the next Faith & Future Summit?</h2>
    <p class="text-on-surface-variant mb-8 max-w-md mx-auto">Join scholars, leaders, and visionaries at our upcoming gathering.</p>
    @php $upcomingEvent = \App\Models\Event::upcoming()->first() @endphp
    <a href="{{ $upcomingEvent ? route('events.show', $upcomingEvent) : route('events.index') }}" 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">View Current Event <span class="material-symbols-outlined">arrow_forward</span></a>
  </div>
</section>
@endsection