@extends('layouts.site')
@section('title', 'Overview - Faith & Future Summit')
@section('meta_description', 'Explore the Faith & Future Summit 2026 — a gathering of scholars, researchers, and intellectual voices under the theme Beyond Borders.')

@section('content')
@php $event = $event ?? \App\Models\Event::past()->first() @endphp

{{-- Hero --}}
<section class="relative pt-28 pb-8 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>
  <div class="max-w-5xl mx-auto relative z-10 reveal">
    <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase text-center">{{ \App\Models\SiteSetting::get('overview_badge', 'Beyond Borders Edition') }}</span>
    @if($event)
    <h1 class="font-display-xl text-display-xl-mobile md:text-display-xl text-white mb-6 text-center">{{ \App\Models\SiteSetting::get('overview_event_title', $event->title) }}</h1>
    @if($event->theme)
    <p class="font-editorial-quote text-2xl md:text-3xl italic text-tertiary text-center mb-8">&#8220;{{ \App\Models\SiteSetting::get('overview_event_theme', $event->theme) }}&#8221;</p>
    @endif
    <p class="font-body-lg text-on-surface-variant max-w-3xl mx-auto text-center">{{ \App\Models\SiteSetting::get('overview_intro_text', $event->excerpt ?: 'Faith & Future Summit 2026 brought together scholars, researchers, and emerging intellectual voices in a powerful exchange of ideas under the theme Beyond Borders.') }}</p>
    @else
    <h1 class="font-display-xl text-display-xl-mobile md:text-display-xl text-white mb-6 text-center">Faith & Future Summit 2026</h1>
    <p class="font-editorial-quote text-2xl md:text-3xl italic text-tertiary text-center mb-8">&#8220;Beyond Borders&#8221;</p>
    <p class="font-body-lg text-on-surface-variant max-w-3xl mx-auto text-center">Faith & Future Summit 2026 brought together scholars, researchers, and emerging intellectual voices in a powerful exchange of ideas.</p>
    @endif
  </div>
</section>

{{-- Main Event Image --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <div class="rounded-2xl overflow-hidden border border-border-subtle">
    <img src="{{ asset('images/event-main.jpeg') }}" alt="FFS 2026 Event" class="w-full h-auto"/>
  </div>
</section>

{{-- Event Title & Details --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <div class="text-center">
    <x-heading key="overview_event_heading" default="A Successful Gathering of Minds" class="font-display-xl text-white mb-6" />
    @if($event && $event->starts_at)
    <div class="flex flex-wrap justify-center gap-6 text-on-surface-variant mb-8">
      <span class="flex items-center gap-2"><span class="material-symbols-outlined text-primary">calendar_today</span> Held on: {{ $event->starts_at->format('F d, Y') }}</span>
      @if($event->venue)<span class="flex items-center gap-2"><span class="material-symbols-outlined text-primary">location_on</span> Venue: {{ $event->venue }}{{ $event->city ? ', '.$event->city : '' }}</span>@endif
    </div>
    @endif
  </div>
</section>

{{-- Stats Row --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-16 reveal">
  <div class="grid grid-cols-3 gap-6 text-center">
    @php $speakerCount = $event ? $event->speakers->count() : 0 @endphp
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle">
      <div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">{{ $speakerCount ?: '0' }}+</div>
      <div class="text-on-surface-variant text-sm mt-2">{{ \App\Models\SiteSetting::get('overview_stat_1_label', 'Distinguished Speakers') }}</div>
    </div>
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle">
      <div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">{{ \App\Models\Stat::where('label','like','%Research%')->orWhere('label','like','%Presentation%')->value('value') ?? '0' }}+</div>
      <div class="text-on-surface-variant text-sm mt-2">{{ \App\Models\SiteSetting::get('overview_stat_2_label', 'Research Presentations') }}</div>
    </div>
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle">
      <div class="font-display-xl text-3xl md:text-5xl text-primary font-extrabold">{{ \App\Models\Stat::where('label','Attendees')->value('value') ?? '0' }}+</div>
      <div class="text-on-surface-variant text-sm mt-2">Attendees</div>
    </div>
  </div>
</section>

{{-- Two Images Row --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-16 reveal">
  <x-heading key="overview_gallery_heading" tag="h3" default="Scholars &amp; Delegates from Across the Globe" class="font-headline-lg text-white text-center mb-8" />
  <div class="grid md:grid-cols-2 gap-5">
    <img src="{{ asset('images/about-1.jpeg') }}" alt="FFS Scholars" class="rounded-2xl w-full border border-border-subtle"/>
    <img src="{{ asset('images/about-2.jpeg') }}" alt="FFS Delegates" class="rounded-2xl w-full border border-border-subtle"/>
  </div>
</section>

{{-- 1. Event Overview --}}
@if($event && $event->overview_description)
<section class="max-w-4xl mx-auto px-margin-mobile pb-16 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-6 text-center">Event Overview</h2>
  <p class="text-on-surface-variant text-[17px] leading-[1.7] text-center max-w-3xl mx-auto">{{ $event->overview_description }}</p>
</section>
@endif

{{-- 2. Speakers From This Edition --}}
@if($event && $event->speakers->isNotEmpty())
<section class="max-w-6xl mx-auto px-margin-mobile pb-16 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Speakers From This Edition</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
    @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">
      <div class="aspect-square overflow-hidden">
        @if($sp->photo)
        <img src="{{ asset('storage/'.$sp->photo) }}" alt="{{ $sp->name }}" class="w-full h-full object-cover transition duration-500 group-hover:scale-105"/>
        @else
        <div class="w-full h-full bg-surface-elevation-2 flex items-center justify-center">
          <span class="text-4xl font-bold text-muted/30">{{ mb_substr($sp->name, 0, 1) }}</span>
        </div>
        @endif
      </div>
      <div class="p-4">
        <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors">{{ $sp->name }}</h3>
        <p class="text-xs text-on-surface-variant mt-1">{{ collect([$sp->country, $sp->role])->filter()->join(' · ') }}</p>
        <span class="inline-block mt-3 text-xs font-bold text-primary border border-primary/30 rounded-xl px-3 py-1.5 group-hover:bg-primary/10 transition-all">View Profile</span>
      </div>
    </a>
    @endforeach
  </div>
</section>
@endif

{{-- 3. Gallery Section --}}
@if($event && $event->gallery)
@php $galleryCategories = ['venue'=>'Venue Shot','audience'=>'Audience Shot','speaker'=>'Speaker Shot','networking'=>'Networking Shot'] @endphp
<section class="max-w-6xl mx-auto px-margin-mobile pb-16 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-3 text-center">Gallery</h2>
  <p class="text-on-surface-variant text-center max-w-2xl mx-auto mb-8">A visual journey through the summit — from the venue and speakers to the audience and networking moments.</p>
  @foreach($galleryCategories as $key => $label)
    @php $items = collect($event->gallery)->where('category', $key) @endphp
    @if($items->isNotEmpty())
    <div class="mb-6">
      <h3 class="font-bold text-white text-sm mb-3 flex items-center gap-2"><span class="w-4 h-px bg-primary"></span>{{ $label }}</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        @foreach($items as $item)
        <button type="button" class="block overflow-hidden rounded-xl border border-border-subtle cursor-pointer focus:outline-none" onclick="openLightbox('{{ asset('storage/'.$item['image']) }}')" style="background:rgba(245,237,220,0.04)">
          <img src="{{ asset('storage/'.$item['image']) }}" alt="{{ $label }}" loading="lazy" class="w-full aspect-[4/3] object-cover transition duration-300 hover:scale-105"/>
        </button>
        @endforeach
      </div>
    </div>
    @endif
  @endforeach
</section>
@endif

{{-- 4. Testimonials / Reflections --}}
@if($event && $event->testimonials)
@php $testimonials = collect($event->testimonials) @endphp
@if($testimonials->isNotEmpty())
<section class="max-w-5xl mx-auto px-margin-mobile pb-16 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Testimonials &amp; Reflections</h2>
  <div class="grid md:grid-cols-2 gap-5">
    @foreach($testimonials as $t)
    <div class="p-6 sm:p-8 rounded-2xl border border-border-subtle bg-surface-elevation-1 flex flex-col justify-between">
      <div>
        <span class="text-4xl text-primary/20 font-serif leading-none">&ldquo;</span>
        <p class="text-on-surface-variant text-[15px] leading-[1.7] -mt-2">{{ $t['quote'] ?? '' }}</p>
      </div>
      <div class="mt-5 pt-4 border-t border-border-subtle">
        <div class="flex items-center gap-3">
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold text-white" style="background:{{ $loop->first ? 'rgba(37,99,255,0.2)' : 'rgba(6,166,166,0.2)' }}">{{ mb_substr($t['name'] ?? 'G', 0, 1) }}</div>
          <div>
            <span class="font-bold text-white text-sm block">{{ $t['name'] ?? ($t['type'] === 'organizer' ? 'Organizer' : 'Attendee') }}</span>
            @if(!empty($t['title']))<span class="text-xs text-on-surface-variant">{{ $t['title'] }}</span>@endif
          </div>
        </div>
      </div>
    </div>
    @endforeach
  </div>
</section>
@endif
@endif

{{-- 5. Media Coverage + Downloads --}}
@if($event && ($event->news_url || $event->brochure_path || $event->media_kit_path))
<section class="max-w-5xl mx-auto px-margin-mobile pb-16 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Media Coverage &amp; Downloads</h2>
  <div class="grid md:grid-cols-3 gap-4">
    @if($event->news_url)
    <a href="{{ $event->news_url }}" target="_blank" rel="noopener" class="p-6 rounded-2xl border border-border-subtle bg-surface-elevation-1 hover:border-primary/40 transition-all group">
      <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background:rgba(37,99,255,0.12)"><span class="material-symbols-outlined text-primary">videocam</span></div>
      <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors">News / Video Coverage</h3>
      <p class="text-xs text-on-surface-variant mt-1">Watch highlights and media coverage from this edition.</p>
      <span class="inline-flex items-center gap-1 text-xs font-bold text-primary mt-3 group-hover:gap-2 transition-all">Watch Now <span class="material-symbols-outlined text-xs">arrow_forward</span></span>
    </a>
    @endif
    @if($event->brochure_path)
    <a href="{{ asset('storage/'.$event->brochure_path) }}" target="_blank" class="p-6 rounded-2xl border border-border-subtle bg-surface-elevation-1 hover:border-primary/40 transition-all group">
      <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background:rgba(37,99,255,0.12)"><span class="material-symbols-outlined text-primary">description</span></div>
      <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors">Event Brochure</h3>
      <p class="text-xs text-on-surface-variant mt-1">Download the official brochure (PDF).</p>
      <span class="inline-flex items-center gap-1 text-xs font-bold text-primary mt-3 group-hover:gap-2 transition-all">Download <span class="material-symbols-outlined text-xs">download</span></span>
    </a>
    @endif
    @if($event->media_kit_path)
    <a href="{{ asset('storage/'.$event->media_kit_path) }}" target="_blank" class="p-6 rounded-2xl border border-border-subtle bg-surface-elevation-1 hover:border-primary/40 transition-all group">
      <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-4" style="background:rgba(37,99,255,0.12)"><span class="material-symbols-outlined text-primary">folder_zip</span></div>
      <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors">Media Kit</h3>
      <p class="text-xs text-on-surface-variant mt-1">Download press kit and media assets.</p>
      <span class="inline-flex items-center gap-1 text-xs font-bold text-primary mt-3 group-hover:gap-2 transition-all">Download <span class="material-symbols-outlined text-xs">download</span></span>
    </a>
    @endif
  </div>
</section>
@endif

{{-- Vision Section --}}
<section class="max-w-4xl mx-auto px-margin-mobile pb-16 reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <x-heading key="overview_vision_heading" default="The Faith &amp; Future Vision" class="font-headline-lg text-white mb-6" />
    <x-heading key="overview_vision_subheading" tag="h3" default="A Historic Gathering of Scholarship and Vision" class="font-headline-md text-white mb-6" />
    <div class="text-on-surface-variant text-[17px] leading-[1.7] space-y-4">
      <p>{{ \App\Models\SiteSetting::get('overview_vision_p1', 'The Faith & Future Summit 2026 was successfully convened as a curated academic platform bringing together distinguished scholars, researchers, and intellectual voices from across disciplines.') }}</p>
      <p>{{ \App\Models\SiteSetting::get('overview_vision_p2', 'Under the theme Beyond Borders, the summit facilitated rigorous dialogue on how faith, ethics, and knowledge can respond to the emerging realities of our time — across society, technology, education, environmental responsibility, and the human condition.') }}</p>
      <p>{{ \App\Models\SiteSetting::get('overview_vision_p3', 'Through keynote addresses, research presentations, and interdisciplinary engagement, the summit reaffirmed the relevance of faith-informed scholarship in shaping ethical futures for a rapidly transforming world.') }}</p>
    </div>
    <div class="flex flex-wrap gap-4 mt-8">
      <a href="{{ route('highlights') }}" class="inline-flex items-center gap-2 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">{{ \App\Models\SiteSetting::get('overview_vision_btn_text', 'Watch Summit Highlights') }} <span class="material-symbols-outlined">arrow_forward</span></a>
      <a href="tel:{{ \App\Models\SiteSetting::get('contact_phone', '+92 311 1000357') }}" class="inline-flex items-center gap-2 border border-border-subtle text-white px-6 py-3 rounded-xl font-bold text-sm hover:bg-white/10 transition-all">
        <span class="material-symbols-outlined">call</span> {{ \App\Models\SiteSetting::get('overview_vision_call_text', 'Call Us') }} {{ \App\Models\SiteSetting::get('contact_phone', '+92 311 1000357') }}
      </a>
    </div>
  </div>
</section>

{{-- Themes Grid --}}
<section class="py-stack-xl px-margin-mobile bg-background">
  <div class="max-w-container-max mx-auto">
    <div class="text-center mb-16 reveal">
      <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase flex items-center justify-center gap-3"><span class="w-8 h-px bg-primary"></span>Summit Themes<span class="w-8 h-px bg-primary"></span></span>
      <x-heading key="overview_themes_heading" default="Key Themes Explored at the 2026 Summit" class="font-headline-lg text-white mb-4" />
      <p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">{{ \App\Models\SiteSetting::get('overview_themes_intro', 'The 2026 edition of the Faith & Future Summit explored five interdisciplinary tracks addressing the ethical and intellectual challenges shaping our future.') }}</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
      @foreach([
        ['trending_up','Future Economies','Exploring ethical frameworks for emerging economic models, digital currencies, and value creation in a rapidly transforming global marketplace.'],
        ['school','Future of Learning','Reimagining education through the lens of faith, technology, and human potential — equipping the next generation with timeless wisdom and modern skills.'],
        ['devices','Digital Life','Navigating AI, data ethics, and the digital transformation of society — ensuring technology serves humanity while preserving spiritual and moral integrity.'],
        ['eco','Environmental Responsibility','Stewarding the Earth through faith-driven sustainability — addressing climate action, green innovation, and the moral imperative to protect creation.'],
        ['diversity_3','Community & Leadership','Building resilient communities through values-based leadership — mobilizing collective action, interfaith collaboration, and principled governance.']
      ] as $theme)
      <div class="relative rounded-2xl bg-surface-elevation-1 border border-border-subtle overflow-hidden p-6 sm:p-8 hover:border-primary/30 transition-all group reveal">
        <div class="relative z-10 flex flex-col gap-4">
          <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary transition-colors">
            <span class="material-symbols-outlined text-primary group-hover:text-white text-2xl">{{ $theme[0] }}</span>
          </div>
          <h3 class="text-white font-bold text-lg">{{ $theme[1] }}</h3>
          <p class="text-on-surface-variant text-sm leading-relaxed">{{ $theme[2] }}</p>
        </div>
      </div>
      @endforeach
    </div>
    <div class="text-center mt-10">
      <a href="{{ route('highlights') }}" class="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">{{ \App\Models\SiteSetting::get('overview_themes_bottom_text', 'Explore Session Highlights') }} <span class="material-symbols-outlined">arrow_forward</span></a>
    </div>
  </div>
</section>

{{-- Summit Highlights --}}
<section class="max-w-4xl mx-auto px-margin-mobile pb-stack-xl reveal">
  <div class="text-center">
    <x-heading key="overview_highlights_heading" default="Summit Highlights" class="font-headline-lg text-white mb-4" />
    <x-heading key="overview_highlights_subheading" tag="h3" default="What the 2026 Summit Delivered" class="font-headline-md text-white mb-6" />
    <p class="text-on-surface-variant text-[17px] leading-[1.7] max-w-3xl mx-auto">{{ \App\Models\SiteSetting::get('overview_highlights_text', 'The 2026 edition of the Faith & Future Summit was not merely a gathering, but a platform for substantive scholarly exchange and forward-looking ethical engagement.') }}</p>
  </div>
</section>

{{-- CTA --}}
<section class="pb-stack-xl px-margin-mobile">
  <div class="max-w-3xl mx-auto text-center reveal">
    <div class="relative rounded-3xl py-14 px-8 text-white overflow-hidden bg-surface-elevation-1 border border-border-subtle">
      <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-primary/5"></div>
      <div class="relative z-10">
        <span class="material-symbols-outlined text-5xl text-primary mb-4">notifications_active</span>
        <x-heading key="overview_cta_heading" default="Want to be part of the next summit?" class="font-headline-lg mb-4" />
        <p class="text-on-surface-variant mb-8 max-w-md mx-auto">{{ \App\Models\SiteSetting::get('overview_cta_text', 'Stay informed about upcoming editions, speaker announcements, and early registration opportunities.') }}</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 hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">{{ \App\Models\SiteSetting::get('overview_cta_btn', 'Get Summit Updates') }} <span class="material-symbols-outlined">arrow_forward</span></a>
      </div>
    </div>
  </div>
</section>

{{-- Lightbox --}}
<div id="lightbox" onclick="closeLightbox()" class="fixed inset-0 z-[999] hidden items-center justify-center" style="background:rgba(0,0,0,0.92);backdrop-filter:blur(4px);cursor:zoom-out">
  <button onclick="closeLightbox()" class="absolute top-4 right-4 w-10 h-10 rounded-full flex items-center justify-center text-white border-0 cursor-pointer z-10" style="background:rgba(255,255,255,0.1);font-size:24px">&times;</button>
  <img id="lightbox-img" class="max-w-[90vw] max-h-[90vh] object-contain rounded-xl" style="box-shadow:0 20px 60px rgba(0,0,0,0.5)" alt=""/>
</div>
<script>
function openLightbox(src){var lb=document.getElementById('lightbox'),img=document.getElementById('lightbox-img');img.src=src;lb.classList.remove('hidden');lb.classList.add('flex');document.body.style.overflow='hidden'}
function closeLightbox(){var lb=document.getElementById('lightbox');lb.classList.add('hidden');lb.classList.remove('flex');document.body.style.overflow=''}
</script>

@endsection