@extends('layouts.site')

@section('title', 'Faith & Future Summit (FFS) | Leadership & Transformation')

@push('head')
<style>
@media (max-width: 767.98px) {
  #upcoming-event .upcoming-event-desc { display: none; }
}
</style>
@endpush

@section('content')

{{-- ============ 1. HERO SECTION ============ --}}
<section class="relative h-dvh min-h-[500px] md:min-h-[600px] flex items-center justify-center overflow-hidden pt-20 md:pt-24">
<div class="absolute inset-0 z-0">
<video autoplay="" class="w-full h-full object-cover opacity-60" loop="" muted="" playsinline="">
<source src="{{ \App\Models\SiteSetting::get('hero_video', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4') }}" type="video/mp4"/>
</video>
<div class="absolute inset-0 bg-primary/20 z-[1] mix-blend-color pointer-events-none"></div>
<div class="absolute inset-0 bg-gradient-to-b from-background/80 via-transparent to-background z-[2]"></div>
</div>
<div class="relative z-10 text-center px-5 sm:px-margin-mobile max-w-4xl mx-auto py-8 md:py-12">
<div class="inline-flex items-center px-4 py-1.5 rounded-full bg-white/10 border border-white/20 backdrop-blur-md mb-4 sm:mb-8 reveal" id="hero-badge">
<span class="font-label-caps text-[10px] sm:text-label-caps text-white tracking-widest">{{ \App\Models\SiteSetting::get('hero_badge', 'EST. 2024 — LEADERSHIP SUMMIT') }}</span>
</div>
<h1 class="font-display-xl text-3xl sm:text-5xl md:text-display-xl mb-4 sm:mb-6 tracking-tighter" style="transition-delay: 100ms;">
                <span class="text-white" id="hero-typewriter"></span><span class="typewriter-cursor" id="hero-cursor" style="font-size:inherit;">|</span>
</h1>
<p class="font-body-lg text-base sm:text-body-lg text-on-surface-variant mb-4 sm:mb-10 max-w-2xl mx-auto" style="transition-delay: 200ms;min-height:2.5em;">
                <span id="hero-sub-typewriter"></span><span class="typewriter-cursor" id="hero-sub-cursor" style="font-size:inherit;">|</span>
            </p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 reveal" style="transition-delay: 300ms;">
@php
$heroBtnPrimaryText   = \App\Models\SiteSetting::get('hero_btn_primary_text', 'Upcoming Event');
$heroBtnPrimaryLink   = \App\Models\SiteSetting::get('hero_btn_primary_link', '#upcoming-event');
$heroBtnSecondaryText = \App\Models\SiteSetting::get('hero_btn_secondary_text', 'Get Tickets');
$heroBtnSecondaryLink = \App\Models\SiteSetting::get('hero_btn_secondary_link', '');
@endphp
<a href="{{ $heroBtnPrimaryLink }}" class="bg-primary text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-bold text-base sm:text-body-lg hover:shadow-[0_0_20px_#2563ff] transition-all w-full sm:w-auto text-center">{{ $heroBtnPrimaryText }}</a>
@if($heroBtnSecondaryLink)
<a href="{{ $heroBtnSecondaryLink }}" class="border border-white/30 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-bold text-base sm:text-body-lg hover:bg-white/10 transition-all w-full sm:w-auto text-center">{{ $heroBtnSecondaryText }}</a>
@else
<button onclick="openTicketPopup()" class="border border-white/30 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-bold text-base sm:text-body-lg hover:bg-white/10 transition-all w-full sm:w-auto">{{ $heroBtnSecondaryText }}</button>
@endif
</div>
</div>
<div class="absolute bottom-6 sm:bottom-8 left-0 right-0 flex flex-col items-center gap-1.5 opacity-70 animate-bounce z-20 pointer-events-none">
<span class="font-label-caps text-[10px] sm:text-[10px] tracking-[0.2em] text-white text-center">SCROLL</span>
<span class="material-symbols-outlined text-white text-lg">expand_more</span>
</div>
</section>

{{-- ============ 2. GLOBAL VISION SECTION ============ --}}
<section class="globe_wrap">
<div class="globe_contain">
  <div class="globe_headline u-container" id="globe-headline">
    <div class="globe_heading_wrap">
      <span class="globe_label">{{ \App\Models\SiteSetting::get('label_global_vision', 'Global Vision') }}</span>
      <h2 class="globe_heading"><span id="typewriter-text"></span><span class="typewriter-cursor">|</span></h2>
    </div>
  </div>
  <div class="globe_image-wrapper">
    <div class="globe_border" id="globe-border">
      <div class="globe_point_wrap" style="transform: rotateZ(-18deg);">
        <div class="globe_point"></div>
        <div class="globe_point_text" style="transform: rotateZ(18deg);">Faith</div>
      </div>
      <div class="globe_point_wrap">
        <div class="globe_point"></div>
        <div class="globe_point_text">Ethics</div>
      </div>
      <div class="globe_point_wrap" style="transform: rotateZ(18deg);">
        <div class="globe_point"></div>
        <div class="globe_point_text" style="transform: rotateZ(-18deg);">Leadership</div>
      </div>
    </div>
    <div class="globe_image" id="lottie-globe"></div>
    <div class="globe_gradient"></div>
</div>
</div>
</div>
</section>

{{-- ============ 3. UPCOMING EVENT HIGHLIGHT ============ --}}
@if(isset($upcoming) && $upcoming)
<section id="upcoming-event" class="py-stack-xl px-margin-mobile bg-surface relative overflow-hidden">
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-background via-background/60 to-transparent pointer-events-none z-10"></div>
<div class="max-w-container-max mx-auto relative z-20">
<div class="reveal mb-12 text-center lg:text-left">
<span class="text-white font-label-caps tracking-widest block mb-4 uppercase">{{ \App\Models\SiteSetting::get('label_next_gathering', 'Next Gathering') }}</span>
<h2 class="font-headline-lg text-headline-lg text-white">{{ \App\Models\SiteSetting::get('label_upcoming_event', 'Upcoming Event Highlight') }}</h2>
</div>
<div class="reveal">
<div class="relative rounded-[2.5rem] overflow-hidden border border-border-subtle group">
  <div class="absolute inset-0 z-0">
    <img alt="" class="w-full h-full object-cover" src="{{ $upcoming->banner ? asset('storage/'.$upcoming->banner) : asset('images/event-hero.jpg') }}"/>
    <div class="absolute inset-0 bg-surface-container-low/60 z-[1]"></div>
  </div>
  <div class="relative z-10 grid lg:grid-cols-12 items-stretch">
<div class="lg:col-span-7 p-10 lg:p-16 flex flex-col justify-center">
<h3 class="font-display-xl text-headline-lg md:text-5xl text-white mb-6">{{ $upcoming->title }}</h3>
<p class="font-body-lg text-on-surface-variant mb-10 max-w-xl upcoming-event-desc">{{ $upcoming->excerpt }}</p>
<div class="grid sm:grid-cols-2 gap-8 mb-10">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-border-subtle text-white">
<span class="material-symbols-outlined">calendar_today</span>
</div>
<div>
<p class="font-label-caps text-on-surface-variant text-[10px]">DATE</p>
<p class="font-bold text-white">{{ $upcoming->starts_at ? $upcoming->starts_at->format('M d, Y') : 'TBA' }}{{ $upcoming->ends_at ? ' - '.$upcoming->ends_at->format('M d, Y') : '' }}</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center border border-border-subtle text-white">
<span class="material-symbols-outlined">location_on</span>
</div>
<div>
<p class="font-label-caps text-on-surface-variant text-[10px]">LOCATION</p>
<p class="font-bold text-white">{{ $upcoming->venue ?? 'TBA' }}</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-4">
<a href="{{ route('events.show', $upcoming) }}" class="bg-white text-black px-8 py-4 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(255,255,255,0.4)] transition-all inline-block text-center">View Event Details</a>
<button onclick="openTicketPopup('{{ $upcoming->edition_label ?? 'FFS' }}')" class="border border-white/20 text-white px-8 py-4 rounded-xl font-bold hover:bg-white/10 transition-all">Get Tickets</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endif

{{-- ============ 4. ABOUT THE FOUNDERS ============ --}}
<section id="about" class="relative min-h-screen flex flex-col justify-center py-20 sm:py-28 px-6 sm:px-10" style="background-color: #131313;">
<div class="max-w-7xl mx-auto w-full">
  <div class="text-center mb-10 reveal">
    <span class="text-primary font-label-caps tracking-widest block uppercase flex items-center justify-center gap-3"><span class="w-8 h-px bg-primary"></span>{{ \App\Models\SiteSetting::get('about_eyebrow', 'About The FFS') }}<span class="w-8 h-px bg-primary"></span></span>
  </div>
  <div class="max-w-4xl mx-auto text-center reveal mb-16">
    <x-heading key="about_heading" default="Bridging the Divine with the Digital" class="font-headline-lg mb-8 text-white" />
    <blockquote class="font-editorial-quote text-editorial-quote italic text-on-surface-variant leading-relaxed mb-10 text-2xl md:text-3xl lg:text-4xl">
      {{ \App\Models\SiteSetting::get('about_quote', '"FFS exists to convene the thinkers, the doers, and the believers who refuse to separate their faith from their contribution to the future. We are building the infrastructure for moral leadership in a tech-driven world."') }}
    </blockquote>
  </div>
  <div class="flex flex-col lg:flex-row items-start justify-between gap-10 lg:gap-20">
    @php $aboutLogo = \App\Models\SiteSetting::get('about_logo'); @endphp
    <img src="{{ $aboutLogo ? asset('storage/'.$aboutLogo) : asset('images/logo.png') }}" alt="Faith & Future Summit" class="h-auto w-full max-w-[420px] lg:max-w-[500px]">
    <div class="flex flex-col max-w-xl">
      <p class="text-[17px] sm:text-[18px] leading-[1.5]" style="color: #c3c5d8;">
        {!! \App\Models\SiteSetting::get('about_description_1', 'Faith & Future Summit is a platform that brings together global leaders, innovators, and visionaries to explore the intersection of faith, ethics, and leadership in a rapidly evolving world.') !!}
      </p>
      <p class="text-[17px] sm:text-[18px] leading-[1.5] mt-4" style="color: #c3c5d8;">
        {!! \App\Models\SiteSetting::get('about_description_2', 'Our mission is to equip every leader with the conviction, clarity, and community needed to reshape the future with purpose-driven innovation.') !!}
      </p>
      @php
      $aboutBtnText = \App\Models\SiteSetting::get('about_button_text', 'Learn More');
      $aboutBtnLink = \App\Models\SiteSetting::get('about_button_link', route('about'));
      @endphp
      <a href="{{ $aboutBtnLink }}" class="group inline-flex items-center gap-4 mt-6" style="color: #64CEFB;">
        <span class="font-semibold text-sm tracking-wide uppercase group-hover:translate-x-1 transition-transform">{{ $aboutBtnText }}</span>
        <span class="flex items-center justify-center w-8 h-8 border" style="border-color: #64CEFB; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: transform 0.2s;">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64CEFB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
        </span>
      </a>
    </div>
  </div>

  <div class="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" id="about-track">
    @php
    $featureCards = \App\Models\HomeFeatureCard::active()->get();
    if ($featureCards->isEmpty()) {
        $featureCards = collect([
            ['image' => 'about-1.jpeg', 'title' => 'Global Convenings', 'description' => 'FFS has convened global leaders, guiding breakthrough conversations at the intersection of faith and the future', 'link' => '/about'],
            ['image' => 'about-2.jpeg', 'title' => 'Leadership Pipeline', 'description' => 'visionary leaders moved through the FFS pipeline of summits and accelerators', 'link' => '/speakers'],
            ['image' => 'event-main.jpeg', 'title' => 'Accelerator Sessions', 'description' => 'accelerator sessions delivered by FFS across global innovation hubs', 'link' => '/about'],
        ]);
    }
    @endphp
    @foreach($featureCards as $i => $card)
    @php $cardIdx = $i % 3; $cardTitle = $card['title'] ?? ''; $cardLink = $card['link'] ?? null; @endphp
    <div class="about-card card-chamfer-{{ $cardIdx + 1 }} relative w-full h-[280px] sm:h-[340px]{{ $cardIdx == 1 ? ' lg:mt-24' : '' }}" style="background-color: rgba(37,99,255,0.25); padding: 1.5px;">
      @if($cardLink)<a href="{{ $cardLink }}" class="block w-full h-full">@endif
      <div class="card-chamfer-{{ $cardIdx + 1 }} relative w-full h-full overflow-hidden {{ $cardIdx == 2 ? 'bg-contain' : 'bg-cover' }} bg-center" style="background-image: url('{{ asset(($card['image'] ?? null) ? 'storage/'.$card['image'] : 'images/event-main.jpeg') }}');{{ $cardIdx == 2 ? ' background-color: #131313;' : '' }}">
        <div class="absolute inset-0 bg-gradient-to-t from-[rgba(37,99,255,0.75)] via-[rgba(37,99,255,0.25)] to-transparent z-[1]"></div>
        <div class="absolute {{ $cardIdx == 1 ? 'left-6 bottom-20' : ($cardIdx == 2 ? 'left-6 right-28 bottom-6' : 'left-6 right-6 bottom-6') }} max-w-[66%] z-[2]">
          @if($cardTitle)<h3 class="text-white font-bold text-lg mb-1 group-hover:text-[#64CEFB] transition-colors">{{ $cardTitle }}</h3>@endif
          <p class="text-[14px] leading-[1.4] text-white">{{ $card['description'] ?? '' }}</p>
        </div>
      </div>
      @if($cardLink)</a>@endif
    </div>
    @endforeach
  </div>
</div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10" style="background: linear-gradient(to bottom, rgba(19,19,19,0) 0%, rgba(19,19,19,0.7) 60%, #131313 100%);"></div>
</section>

{{-- ============ 5. STATS STRIP ============ --}}
<section class="relative py-16 md:py-24 px-6 md:px-12 lg:px-[120px] text-white w-full border-t border-white/10 overflow-hidden">
  <div class="absolute inset-0 z-0">
    @php
    $statsVideoRaw = trim((string) \App\Models\SiteSetting::get('stats_video'));
    $statsYtId = null;
    if ($statsVideoRaw !== '' && preg_match('/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/', $statsVideoRaw, $statsYtMatch)) {
        $statsYtId = $statsYtMatch[1];
    }
    @endphp
    @if ($statsYtId)
    <iframe id="conf-video" src="https://www.youtube.com/embed/{{ $statsYtId }}?autoplay=1&mute=1&loop=1&playlist={{ $statsYtId }}&controls=0&rel=0&playsinline=1&modestbranding=1&iv_load_policy=3&enablejsapi=1" class="w-full h-full" style="border:0; position:absolute; inset:0; pointer-events:none;" allow="autoplay; encrypted-media; picture-in-picture" title="Stats background video"></iframe>
    @else
    <video autoplay="" muted="" playsinline="" preload="auto" loop="" class="w-full h-full object-cover" id="conf-video">
      <source src="{{ $statsVideoRaw !== '' ? $statsVideoRaw : asset('videos/ffs-summit-2026.mp4') }}" type="video/mp4"/>
    </video>
    @endif
    <div class="absolute inset-0 bg-black/60 z-[1]"></div>
    @if (!$statsYtId)
    <button id="video-toggle" class="absolute bottom-6 right-6 z-10 w-10 h-10 flex items-center justify-center rounded-full bg-white/10 backdrop-blur border border-white/20 hover:bg-white/20 transition-all">
      <svg id="video-pause-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
      <svg id="video-play-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white" style="display:none;"><polygon points="5,3 19,12 5,21"/></svg>
    </button>
    @endif
  </div>
  <div class="relative z-10 w-full max-w-[1440px] mx-auto flex flex-col lg:flex-row gap-16 lg:gap-[160px] items-stretch">
    <div class="flex-1 flex flex-col justify-start" id="stats-left">
      <x-heading key="stats_heading" default="Faith &amp; Future by the Numbers" class="font-headline-lg text-white font-medium tracking-tight mb-6 leading-[1.1] max-w-[590px]" />
      <p class="text-base md:text-lg text-white/60 leading-relaxed font-body-lg font-light max-w-lg whitespace-normal mb-16">
        <span>{{ \App\Models\SiteSetting::get('stats_description', 'Since 2024, the Faith & Future Summit has been building a global movement of ethical leaders across technology, scholarship, and community impact.') }}</span>
      </p>
        @php $homeStats = \App\Models\SiteSetting::get('home_stats', collect(\App\Models\Stat::active()->get())->map(fn($s) => ['label'=>$s->label,'value'=>$s->value,'suffix'=>$s->suffix])->toArray()) @endphp
        <div class="grid grid-cols-2 md:grid-cols-[max-content_max-content] gap-8 md:gap-x-16 lg:gap-x-24" id="stats-grid">
          @foreach($homeStats as $stat)
          <div class="flex flex-col">
            <span class="text-4xl md:text-5xl lg:text-[56px] font-headline-md text-white tracking-tight mb-3 stat-counter" data-target="{{ $stat['value'] }}" data-suffix="{{ $stat['suffix'] ?? '' }}">0</span>
            <span class="text-[10px] md:text-xs font-semibold text-white/60 font-label-caps uppercase tracking-wider">{{ $stat['label'] }}</span>
          </div>
        @endforeach
      </div>
    </div>
</div>
</section>

@push('scripts')
<script>
(function(){
  var track = document.getElementById('feature-track');
  if (!track) return;
  var wrapper = document.getElementById('feature-scroll');
  if (!wrapper) return;
  function canScroll(){return track.scrollWidth > wrapper.clientWidth;}
  wrapper.addEventListener('mouseenter', function(){ if(canScroll()) wrapper.style.cursor='grab'; });
  var scrollPos = 0, maxScroll = 0, dir = 1;
  function autoScroll(){
    if(!canScroll()) return;
    maxScroll = track.scrollWidth - wrapper.clientWidth;
    scrollPos += dir * 0.6;
    if(scrollPos >= maxScroll || scrollPos <= 0) dir *= -1;
    wrapper.scrollLeft = scrollPos;
  }
  var si = setInterval(autoScroll, 30);
  wrapper.addEventListener('mouseenter', function(){ clearInterval(si); si=null; });
  wrapper.addEventListener('mouseleave', function(){ if(!si){ si=setInterval(autoScroll,30); } });
  wrapper.addEventListener('scroll', function(){ scrollPos = wrapper.scrollLeft; });
})();
</script>
@endpush

{{-- ============ 6. THE VISION ============ --}}
<section class="max-w-full 2xl:max-w-[1400px] mx-auto relative z-10 px-margin-mobile pt-stack-lg pb-16 md:pb-24">
<div class="text-center mb-16 reveal">
<span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">{{ \App\Models\SiteSetting::get('vision_label', 'The Vision') }}</span>
<x-heading key="vision_heading" default="Bridging Faith &amp; Innovation" 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('vision_description', 'Visualizing the intersection of ancient wisdom and future technology.') }}</p>
</div>
<div class="reveal rounded-[2.5rem] overflow-hidden border border-white/10 bg-black shadow-2xl relative group">
<iframe src="https://www.youtube.com/embed/3gQRkO9-uAA?si=pQDqoWWgf6acvvgr" class="w-full aspect-video" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>
</section>

{{-- ============ 7. KEY BENEFITS ============ --}}
<section class="relative w-full px-4 sm:px-6 md:px-10 py-stack-xl overflow-hidden">
<div class="absolute inset-0 z-0">
  <video autoplay="" class="w-full h-full object-cover opacity-60" loop="" muted="" playsinline="">
    <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4" type="video/mp4" />
  </video>
  <div class="absolute inset-0 bg-surface/70"></div>
</div>
<div class="max-w-container-max mx-auto relative z-10">
<x-heading key="label_benefits" default="Key Benefits" class="text-white font-headline-lg text-center mb-16 reveal" />
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  @php $homeBenefits = \App\Models\SiteSetting::get('home_benefits', collect(\App\Models\Benefit::active()->get())->map(fn($b) => ['title'=>$b->title,'description'=>$b->description])->toArray()) @endphp
  @foreach($homeBenefits as $benefit)
  <div class="relative rounded-2xl bg-surface-elevation-2/60 backdrop-blur-sm border border-border-subtle overflow-hidden p-8 sm:p-10 hover:border-primary/30 transition-all group reveal">
    @if($loop->first)
    <div class="absolute top-1/2 -translate-y-1/2 -left-[420px] h-[460px] w-[460px] rounded-full bg-primary/10 blur-3xl"></div>
    @endif
    @if($loop->last)
    <div class="absolute -top-28 -right-28 h-56 w-56 rounded-full bg-primary/10 blur-3xl"></div>
    @endif
    <div class="relative z-10 flex flex-col gap-6">
      <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">{{ ['psychology','hub','neurology'][$loop->index] ?? 'star' }}</span>
      </div>
      <h3 class="text-white font-headline-md text-headline-md leading-snug">{{ $benefit['title'] }}</h3>
      <p class="text-on-surface-variant text-body-md leading-relaxed">{{ $benefit['description'] }}</p>
    </div>
  </div>
  @endforeach
</div>
</div>
</section>

{{-- ============ 8. FEATURED SPEAKERS — Carousel ============ --}}
<section class="py-16 sm:pt-20 sm:pb-0 px-margin-mobile bg-background relative">
<div class="max-w-container-max mx-auto relative z-10">
<div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-6 reveal">
<div class="space-y-4">
<span class="text-primary font-label-caps tracking-widest block uppercase flex items-center gap-3"><span class="w-8 h-px bg-primary"></span>{{ \App\Models\SiteSetting::get('label_speakers_sub', 'Voice of the Future') }}</span>
<h2 class="font-headline-lg text-headline-lg text-white leading-[1.15]">{{ \App\Models\SiteSetting::get('label_featured_speakers', 'Featured Speakers') }}</h2>
<p class="text-on-surface-variant max-w-lg text-body-md">Visionary leaders shaping the future of faith, ethics, and global innovation.</p>
</div>
<a href="{{ route('speakers.index') }}" class="border border-border-subtle hover:border-primary transition-all px-6 py-3 rounded-xl font-bold text-white hover:bg-primary/10 flex items-center gap-2 whitespace-nowrap text-sm">Explore All Speakers <span class="text-lg">→</span></a>
</div>
</div>
<div class="max-w-container-max mx-auto relative z-10">
<div class="feature-scroll-wrapper w-full px-4 md:px-8" id="feature-scroll">
  <div class="feature-scroll-track flex gap-6 w-max" id="feature-track">
    @php $allSpeakers = \App\Models\Speaker::where('is_featured', true)->orderBy('sort_order')->get() @endphp
    @forelse($allSpeakers as $sp)
    <a href="{{ route('speakers.show', $sp) }}" class="feature-card relative flex flex-col justify-start items-start w-[320px] md:w-[400px] group flex-shrink-0">
      <div class="feature-border self-stretch aspect-[4/5] rounded-2xl z-10 overflow-hidden" style="background: #1A1A1C;">
        <div class="relative w-full h-full bg-cover bg-center" style="background-image: url('{{ $sp->photo ? asset('storage/'.$sp->photo) : asset('images/speaker-placeholder.svg') }}');">
          <div class="absolute inset-0 bg-gradient-to-t from-[#131313]/95 via-[#131313]/20 to-transparent"></div>
          <div class="absolute bottom-0 left-0 right-0 p-6 z-10">
            <h3 class="text-white font-headline-md text-lg tracking-tight">{{ $sp->name }}</h3>
            @if($sp->country || $sp->role)
            <p class="text-on-surface-variant text-xs mt-1 leading-tight">{{ collect([$sp->country, $sp->role])->filter()->join(' · ') }}</p>
            @endif
          </div>
        </div>
      </div>
      <div class="px-4 pb-4 pt-2 w-full">
        <span class="text-sm font-bold text-primary flex items-center justify-center gap-1.5 group-hover:gap-3 transition-all border border-primary/30 hover:border-primary rounded-xl px-4 py-2.5">View Profile <span class="material-symbols-outlined text-base">arrow_forward</span></span>
      </div>
    </a>
    @empty
    <div class="text-center py-10 w-full text-on-surface-variant">Speakers coming soon.</div>
    @endforelse
  </div>
</div>
</div>
</section>

{{-- ============ 9. PAST SUMMITS / GALLERY ============ --}}
<section id="past" class="py-stack-xl px-margin-mobile bg-surface-dim">
<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">{{ \App\Models\SiteSetting::get('label_legacy', 'Legacy') }}</span>
<h2 class="font-headline-lg text-headline-lg text-white mb-4">{{ \App\Models\SiteSetting::get('label_past_summits', 'Past Summits / Gallery Preview') }}</h2>
<p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">A visual journey through the moments that defined our growing community.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
  @php
  // Past events first, then the upcoming event in the last slot; keep min 3 cards so the section keeps its height
  $legacySlots = collect($pastEvents)->push($upcoming)->filter()->values()->all();
  $legacySlots = array_pad($legacySlots, 3, null);
  @endphp
  @foreach($legacySlots as $i => $ev)
  @if($ev)
  <a href="{{ $ev->detailUrl }}" class="cat-card relative flex flex-col justify-between items-start p-4 sm:p-5 md:p-6 min-h-[150px] sm:min-h-[180px] md:min-h-[220px] overflow-hidden group">
    @if($ev->cardImageUrl)
    <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="{{ asset('storage/'.$ev->cardImageUrl) }}" alt="{{ $ev->title }}"/>
    @else
    <div class="absolute inset-0 bg-surface-elevation-1 grid place-items-center"><span class="material-symbols-outlined text-4xl text-muted">event</span></div>
    @endif
    <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition-colors duration-500"></div>
    <h2 class="relative z-10 text-lg sm:text-2xl md:text-3xl max-[480px]:!text-base font-medium group-hover:-translate-y-2 duration-500" style="writing-mode:vertical-lr;transform:rotate(180deg);">{{ $ev->edition_label ?? $ev->title }}</h2>
    <span class="btn-primary-cat relative z-10 mt-auto px-4 py-1.5 bg-white text-black rounded-full text-[10px] sm:text-xs">Explore</span>
  </a>
  @else
  <a href="{{ route('past-summits') }}" class="cat-card relative flex flex-col justify-between items-start p-4 sm:p-5 md:p-6 min-h-[150px] sm:min-h-[180px] md:min-h-[220px] overflow-hidden group">
    <div class="absolute inset-0 bg-surface-elevation-1 grid place-items-center">
      <span class="material-symbols-outlined text-4xl text-muted/30">event_available</span>
    </div>
    <div class="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition-colors duration-500"></div>
    <h2 class="relative z-10 text-lg sm:text-2xl md:text-3xl max-[480px]:!text-base font-medium group-hover:-translate-y-2 duration-500" style="writing-mode:vertical-lr;transform:rotate(180deg);">TBA</h2>
    <span class="btn-primary-cat relative z-10 mt-auto px-4 py-1.5 bg-white/20 text-white rounded-full text-[10px] sm:text-xs border border-white/10">Explore</span>
  </a>
  @endif
  @endforeach
</div>
</div>
</section>

{{-- ============ 10. SUPPORT THE CAUSE ============ --}}
<section id="support" class="py-stack-xl px-margin-mobile bg-surface-container-lowest">
<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">{{ \App\Models\SiteSetting::get('label_support', 'Impact') }}</span>
<x-heading key="support_heading" default="Support The Cause" 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('support_description', 'Help us sustain a platform for transformative leadership and global ethical progress.') }}</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/50 transition-all group reveal flex flex-col">
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">volunteer_activism</span>
</div>
<h3 class="font-bold text-2xl text-white mb-4">Donation</h3>
<p class="text-on-surface-variant mb-8 text-sm leading-relaxed">Fuel our scholarship fund for emerging leaders. Every contribution directly impacts future ethical pioneers.</p>
<button onclick="openDonationPopup()" class="w-full py-4 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all mt-auto">Donate Now</button>
</div>
<div class="p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/50 transition-all group reveal flex flex-col" style="transition-delay: 100ms;">
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">handshake</span>
</div>
<h3 class="font-bold text-2xl text-white mb-4">Partner with Us</h3>
<p class="text-on-surface-variant mb-8 text-sm leading-relaxed">Align your organization with our mission. We offer deep integration and shared value partnerships.</p>
<button onclick="openPartnerPopup('Gold')" class="w-full py-4 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all mt-auto">Become a Partner</button>
</div>
<div class="p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/50 transition-all group reveal flex flex-col" style="transition-delay: 200ms;">
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">workspace_premium</span>
</div>
<h3 class="font-bold text-2xl text-white mb-4">Advertisers / Sponsors</h3>
<p class="text-on-surface-variant mb-8 text-sm leading-relaxed">Connect with our high-impact audience through curated Silver and Gold packages.</p>
<a href="{{ route('advertisers') }}" class="block w-full py-4 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all text-center mt-auto">View Packages</a>
</div>
</div>
</div>
</section>

{{-- ============ 11. MEDIA & RESOURCES ============ --}}
<section id="media" class="py-stack-xl px-margin-mobile bg-background">
<div class="max-w-container-max mx-auto">
<div class="flex flex-col md:flex-row justify-between items-baseline mb-12 gap-4 reveal">
<div>
<span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">{{ \App\Models\SiteSetting::get('label_resources', 'Resources') }}</span>
<h2 class="font-headline-lg text-headline-lg text-white">{{ \App\Models\SiteSetting::get('label_media_resources', 'Media &amp; Resources') }}</h2>
</div>
<p class="font-body-lg text-on-surface-variant">News, recap videos, press releases, and expert resources.</p>
</div>
@php $mediaItems = \App\Models\MediaItem::ordered()->take(3)->get() @endphp
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  @if($mediaItems->isNotEmpty())
  @php $featured = $mediaItems->first(); $featuredEmbed = $featured ? ($featured->videoEmbedUrl() ?? ($featured->isDirectVideo() ? $featured->link : null)) : null; @endphp
  <div class="reveal md:col-span-2 row-span-2 group relative overflow-hidden rounded-2xl bg-surface-container border border-border-subtle hover:border-primary/40 transition-all duration-500">
    <div class="relative h-full min-h-[300px] md:min-h-[500px] overflow-hidden">
      @if($featuredEmbed)
      @if($featured->isDirectVideo())
      <video src="{{ $featured->link }}" class="absolute inset-0 w-full h-full object-cover" controls playsinline></video>
      @else
      <iframe src="{{ $featuredEmbed }}" class="absolute inset-0 w-full h-full" style="border:0;" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" title="{{ $featured->title }}" loading="lazy"></iframe>
      @endif
      @elseif($featured->image)
      <img alt="{{ $featured->title }}" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="{{ asset('storage/'.$featured->image) }}"/>
      @else
      <div class="absolute inset-0 bg-surface-elevation-1 grid place-items-center"><span class="material-symbols-outlined text-6xl text-muted">article</span></div>
      @endif
      @if(!$featuredEmbed)<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
      <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
        <span class="w-16 h-16 rounded-full bg-white/20 backdrop-blur flex items-center justify-center border border-white/30 group-hover:scale-110 transition-transform">
          <span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">{{ $featured->type === 'video_recap' ? 'play_circle' : 'description' }}</span>
        </span>
      </div>@endif
      @if($featuredEmbed)
      <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8 z-10 bg-gradient-to-t from-black/80 via-transparent to-transparent pointer-events-none">
        <span class="px-3 py-1 rounded-full bg-primary/80 backdrop-blur text-white text-[10px] font-bold tracking-widest uppercase inline-block mb-2">{{ $featured->typeLabel() }}</span>
        <h4 class="font-bold text-white text-xl md:text-2xl leading-snug">{{ $featured->title }}</h4>
        @if($featured->excerpt)<p class="text-white/70 text-sm leading-relaxed mt-1 max-w-xl">{{ $featured->excerpt }}</p>@endif
      </div>
      @else
      <span class="absolute top-4 left-4 z-10 px-3 py-1 rounded-full bg-primary/80 backdrop-blur text-white text-[10px] font-bold tracking-widest uppercase">{{ $featured->typeLabel() }}</span>
      @if($featured->published_at)<span class="absolute top-4 right-4 z-10 text-[11px] text-white/70">{{ $featured->published_at->format('M d, Y') }}</span>@endif
      <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8 z-10">
        <h4 class="font-bold text-white text-xl md:text-2xl mb-3 leading-snug group-hover:text-primary transition-colors">{{ $featured->title }}</h4>
        @if($featured->excerpt)<p class="text-white/70 text-sm leading-relaxed mb-4 max-w-xl">{{ $featured->excerpt }}</p>@endif
        @if($featured->link)<a href="{{ $featured->link }}" class="inline-flex items-center gap-2 text-primary text-sm font-semibold group-hover:gap-4 transition-all">{{ $featured->type === 'video_recap' ? 'Watch Recap' : ($featured->type === 'whitepaper' ? 'Download' : 'Read More') }} <span class="text-lg">→</span></a>@endif
      </div>
      @endif
    </div>
  </div>
  @foreach($mediaItems->skip(1) as $item)
  <div class="reveal group cursor-pointer relative overflow-hidden rounded-2xl bg-surface-container border border-border-subtle hover:border-primary/40 transition-all duration-500" style="transition-delay: {{ $loop->iteration * 100 }}ms;">
    <div class="relative h-full min-h-[220px] overflow-hidden">
      @if($item->image)
      <img alt="{{ $item->title }}" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="{{ asset('storage/'.$item->image) }}"/>
      @else
      <div class="absolute inset-0 bg-surface-elevation-1 grid place-items-center"><span class="material-symbols-outlined text-4xl text-muted">article</span></div>
      @endif
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent"></div>
      <span class="absolute top-3 left-3 z-10 px-2.5 py-1 rounded-full bg-primary/80 backdrop-blur text-white text-[10px] font-bold tracking-widest uppercase">{{ $item->typeLabel() }}</span>
      @if($item->published_at)<span class="absolute top-3 right-3 z-10 text-[10px] text-white/60">{{ $item->published_at->format('M d, Y') }}</span>@endif
      <div class="absolute bottom-0 left-0 right-0 p-5 z-10">
        <h4 class="font-bold text-white mb-1.5 leading-snug group-hover:text-primary transition-colors text-sm md:text-base">{{ $item->title }}</h4>
        @if($item->excerpt)<p class="text-white/60 text-xs leading-relaxed mb-2">{{ $item->excerpt }}</p>@endif
        @if($item->link)<a href="{{ $item->link }}" class="inline-flex items-center gap-1.5 text-primary text-xs font-semibold group-hover:gap-3 transition-all">{{ $item->type === 'video_recap' ? 'Watch' : ($item->type === 'whitepaper' ? 'Download' : 'Read More') }} <span class="text-base">→</span></a>@endif
      </div>
    </div>
  </div>
  @endforeach
  @else
  <div class="reveal md:col-span-3 text-center py-20 bg-surface-elevation-1 rounded-2xl border border-border-subtle">
    <span class="material-symbols-outlined text-6xl text-muted">description</span>
    <p class="mt-4 text-on-surface-variant">Media items coming soon.</p>
  </div>
  @endif
</div>
</div>
</section>

{{-- ============ 12. CTA + FAQ ============ --}}
<section id="faq" class="py-20 max-[900px]:py-[60px]" style="font-family:'Inter',sans-serif;background:#131313;color:#c3c5d8;">
<div class="max-w-[1100px] w-full mx-auto px-5">
<div class="grid grid-cols-[1.6fr_1fr] gap-[30px] items-stretch max-[900px]:grid-cols-1 max-[900px]:gap-[60px] reveal">
  <div class="relative rounded-[24px] py-20 px-10 text-white flex flex-col justify-center items-center text-center overflow-hidden" style="box-shadow:0 10px 30px rgba(0,0,0,0.5);">
    <div class="absolute inset-0 z-0">
      <video autoplay="" class="w-full h-full object-cover opacity-90" loop="" muted="" playsinline="">
<source src="{{ \App\Models\SiteSetting::get('hero_video', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4') }}" type="video/mp4"/>
      </video>
      <div class="absolute inset-0 bg-primary/30 z-[1] mix-blend-color pointer-events-none"></div>
      <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/50 z-[2]"></div>
    </div>
    <div class="relative z-10 flex flex-col items-center">
      <x-heading key="cta_heading" :default='"Ready to Join\nthe Movement?"' class="font-normal leading-[1.1] mb-[30px] max-[480px]:!text-[2rem]" />
      <button onclick="openTicketPopup()" class="get-started-btn text-white font-semibold cursor-pointer border-none text-[0.95rem] transition-all duration-200" style="padding:14px 32px;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,0.5);background:#2563ff;" onmouseenter="this.style.boxShadow='0 14px 30px rgba(0,0,0,0.7)';this.style.transform='translateY(-2px)'" onmouseleave="this.style.boxShadow='0 10px 20px rgba(0,0,0,0.5)';this.style.transform='translateY(0)'">{{ \App\Models\SiteSetting::get('cta_button', 'Get Your Tickets') }}</button>
    </div>
  </div>
  <div class="flex flex-col justify-center gap-3" id="faq-container">
    @php $homeFaqs = \App\Models\SiteSetting::get('home_faqs', \App\Models\Faq::active()->get()->map(fn($f) => ['question'=>$f->question,'answer'=>$f->answer])->toArray()) @endphp
    @foreach($homeFaqs as $faq)
    <div class="faq-item bg-[#1A1A1C] border rounded-[10px] py-[18px] px-5 cursor-pointer transition-all duration-200" style="border-color:rgba(255,255,255,{{ $loop->first ? '0.12' : '0.06' }});box-shadow:0 {{ $loop->first ? '4px 12px' : '2px 8px' }} rgba(0,0,0,{{ $loop->first ? '0.2' : '0.15' }});">
      <div class="faq-header flex justify-between items-center font-normal text-[0.9rem] text-white" onclick="toggleFaq(this)">
        <span>{{ $faq['question'] }}</span>
        <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="{{ $loop->first ? '18 15 12 9 6 15' : '6 9 12 15 18 9' }}"></polyline></svg>
      </div>
      <div class="faq-answer mt-3 text-[0.9rem] text-[#888] leading-[1.6]" style="display:{{ $loop->first ? 'block' : 'none' }};">{{ $faq['answer'] }}</div>
    </div>
    @endforeach
  </div>
</div>
</div>
</section>

@endsection