@extends('layouts.site')
@section('title', 'About - Faith & Future Summit')
@section('meta_description', \App\Models\SiteSetting::get('about_description_1', 'The Faith & Future Summit is an academic platform fostering dialogue on faith, ethics, knowledge, and the future.'))
@section('breadcrumbs', '[{"name":"About"}]')

@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-0 h-64 w-64 rounded-full bg-tertiary/5 blur-3xl"></div>
  </div>
  <div class="max-w-6xl mx-auto relative z-10">
    <div class="text-center reveal mb-12">
      <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>About Us<span class="w-8 h-px bg-primary"></span></span>
      <h1 class="font-display-xl text-display-xl-mobile md:text-display-xl text-white mb-6">Faith & Future Summit</h1>
      <p class="font-editorial-quote text-xl md:text-2xl italic text-on-surface-variant max-w-3xl mx-auto">An Intellectual Platform for Faith, Knowledge, and the Future</p>
    </div>
    <div class="grid md:grid-cols-2 gap-6 reveal">
      <div class="rounded-2xl overflow-hidden border border-border-subtle">
        <img src="{{ asset('images/about-hero-1.jpeg') }}" alt="FFS Event" class="w-full h-full object-cover"/>
      </div>
      <div class="rounded-2xl overflow-hidden border border-border-subtle">
        <img src="{{ asset('images/about-hero-2.jpeg') }}" alt="FFS Event" class="w-full h-full object-cover"/>
      </div>
    </div>
  </div>
</section>

{{-- About Description --}}
<section class="max-w-4xl mx-auto px-margin-mobile py-stack-lg reveal">
  <div class="text-center mb-8">
    <x-heading key="about_heading" default="Our Mission" class="font-headline-lg text-white" />
    @if(\App\Models\SiteSetting::get('about_subheading'))
    <x-heading key="about_subheading" tag="p" class="text-on-surface-variant mt-3 max-w-2xl mx-auto" />
    @endif
  </div>
  <div class="text-on-surface-variant text-[17px] leading-[1.7] space-y-5 text-center">
    <p>{!! \App\Models\SiteSetting::get('about_description_1', '...') !!}</p>
    <p>{!! \App\Models\SiteSetting::get('about_description_2', '...') !!}</p>
  </div>
</section>

{{-- Key Areas of Engagement --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Key Areas of Engagement</h2>
    <p class="text-on-surface-variant text-center max-w-2xl mx-auto mb-10">The Summit explores a wide range of intellectual and societal themes that reflect the changing realities of the modern world.</p>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
      @foreach(['Future economies and systems of equity','Education, knowledge, and learning','Digital transformation and society','Environment and sustainability','Community development and leadership','Ethics, values, and human responsibility'] as $area)
      <div class="flex items-center gap-3 p-4 rounded-xl bg-surface-container border border-border-subtle hover:border-primary/30 transition-all">
        <span class="material-symbols-outlined text-primary text-lg">{{ ['account_balance','school','devices','eco','groups','gavel'][$loop->index] }}</span>
        <span class="text-on-surface-variant text-sm">{{ $area }}</span>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- Purpose & Vision --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="grid lg:grid-cols-5 gap-8 items-center">
    <div class="lg:col-span-3 space-y-5">
      <h2 class="font-headline-lg text-headline-lg text-white">Purpose &amp; Vision</h2>
      <p class="text-on-surface-variant text-[17px] leading-[1.7]">{{ \App\Models\SiteSetting::get('about_quote', 'The Faith & Future Summit is an academic and intellectual platform where knowledge, ethics, and contemporary thought come together to explore the evolving questions of the modern world. It provides a space for meaningful dialogue and reflection, bringing together diverse perspectives across disciplines.') }}</p>
      <p class="text-on-surface-variant text-[17px] leading-[1.7]">The platform is guided by a commitment to rigorous inquiry, ethical reflection, and interdisciplinary engagement, supporting the exploration of complex global issues through thoughtful exchange and collaborative learning while encouraging informed, responsible, and reflective perspectives.</p>
    </div>
    <div class="lg:col-span-2">
      <img src="{{ asset('images/about-vision.jpeg') }}" alt="FFS Vision" class="rounded-2xl w-full border border-border-subtle"/>
    </div>
  </div>
</section>

{{-- Academic Platform for Global Dialogue --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="grid lg:grid-cols-5 gap-8 items-center">
    <div class="lg:col-span-2 order-2 lg:order-1">
      <img src="{{ asset('images/about-dialogue.jpeg') }}" alt="FFS Dialogue" class="rounded-2xl w-full border border-border-subtle"/>
    </div>
    <div class="lg:col-span-3 order-1 lg:order-2 space-y-5">
      <h2 class="font-headline-lg text-headline-lg text-white">An Academic Platform for Global Dialogue</h2>
      <p class="text-on-surface-variant text-[17px] leading-[1.7]">The Faith & Future Summit brings together scholars, researchers, educators, and thinkers for meaningful global dialogue. It provides a space for interdisciplinary engagement where ideas are shared, examined, and developed across diverse fields of knowledge.</p>
      <p class="text-on-surface-variant text-[17px] leading-[1.7]">Participants engage through research-based presentations, discussions, and thematic sessions that encourage open exchange of perspectives while remaining focused on intellectual rigor and collaborative learning.</p>
    </div>
  </div>
</section>

{{-- Organising Institution --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle overflow-hidden">
    <div class="grid lg:grid-cols-5">
      <div class="lg:col-span-3 p-8 md:p-14 space-y-5">
        <span class="text-primary font-label-caps tracking-widest block uppercase">Organising Institution</span>
        <h2 class="font-headline-lg text-3xl text-white">SISL — Al-Kawthar University</h2>
        <p class="text-on-surface-variant text-[17px] leading-[1.7]">The Faith & Future Summit is organized by the School of Islamic Scholars & Leaders (SISL), Al-Kawthar University. SISL is an academic platform dedicated to promoting scholarship, ethical inquiry, and intellectual development.</p>
        <p class="text-on-surface-variant text-[17px] leading-[1.7]">The institution emphasizes learning, research, and ethical leadership, encouraging critical thinking and responsible engagement with contemporary social and intellectual challenges.</p>
        <a href="https://islamicscholar.alkawthar.edu.pk/" target="_blank" class="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">Discover More About SISL <span class="material-symbols-outlined">arrow_forward</span></a>
      </div>
      <div class="lg:col-span-2 min-h-[300px]">
        <img src="{{ asset('images/about-uni.jpg') }}" alt="Al-Kawthar University" class="w-full h-full object-cover"/>
      </div>
    </div>
  </div>
</section>

{{-- Who Attends --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Who Attends</h2>
    <p class="text-on-surface-variant text-center max-w-2xl mx-auto mb-10">The Summit brings together a diverse community of thinkers, leaders, and changemakers from across the globe.</p>
    @php $audience = \App\Models\SiteSetting::get('about_audience', []); $icons = ['school','travel_explore','group','badge','diversity_3','business']; $i = 0; @endphp
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
      @foreach($audience as $item)
      <div class="p-5 rounded-2xl border border-border-subtle bg-surface-container hover:border-primary/30 transition-all">
        <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style="background:rgba(37,99,255,0.12)"><span class="material-symbols-outlined text-primary">{{ $icons[$i % count($icons)] }}</span></div>
        <h3 class="font-bold text-white text-sm mb-1.5">{{ $item['title'] ?? '' }}</h3>
        <p class="text-on-surface-variant text-xs leading-relaxed">{{ $item['description'] ?? '' }}</p>
      </div>
      @php $i++ @endphp
      @endforeach
    </div>
  </div>
</section>

{{-- FFS Journey / Timeline --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <h2 class="font-headline-lg text-headline-lg text-white mb-3 text-center">FFS Journey / Timeline</h2>
    <p class="text-on-surface-variant text-center max-w-2xl mx-auto mb-10">A look back at the milestones and gatherings that have shaped the Faith & Future Summit.</p>
    @php $journeyEvents = \App\Models\Event::orderBy('starts_at')->get() @endphp
    <div class="space-y-3">
      @forelse($journeyEvents as $ev)
      <div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 sm:p-5 rounded-2xl border border-border-subtle bg-surface-container hover:border-primary/30 transition-all gap-3">
        <div class="flex items-center gap-4">
          <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style="background:{{ $ev->is_past ? 'rgba(245,237,220,0.08)' : 'rgba(37,99,255,0.12)' }}">
            <span class="material-symbols-outlined text-sm" style="color:{{ $ev->is_past ? 'var(--muted)' : 'var(--primary)' }}">{{ $ev->is_past ? 'check' : 'schedule' }}</span>
          </div>
          <div>
            <span class="text-xs font-bold tracking-widest uppercase text-primary block">{{ $ev->starts_at ? $ev->starts_at->format('M Y') : ($ev->edition_label ?? '') }}</span>
            <h3 class="font-bold text-white text-sm mt-0.5">{{ $ev->title }}</h3>
          </div>
        </div>
        <div>
          <span class="inline-block px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest" style="background:{{ $ev->is_past ? 'rgba(245,237,220,0.08)' : ($ev->is_past === false && !$ev->is_past ? 'rgba(37,99,255,0.15)' : 'rgba(6,166,166,0.15)') }};color:{{ $ev->is_past ? 'var(--muted)' : ($ev->is_past === false && !$ev->is_past ? 'var(--primary)' : '#06A6A6') }}">
            @if($ev->is_past) Past @else Upcoming @endif
          </span>
        </div>
      </div>
      @empty
      <div class="text-center py-10 text-on-surface-variant">No events yet.</div>
      @endforelse
    </div>
  </div>
</section>

@endsection