@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('media_meta_title', 'Media & Resources - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('media_meta_description', 'Explore official updates, summit highlights, photo galleries, and media coverage.'))

@section('content')

@php
    $allMedia = \App\Models\MediaItem::ordered()->get();
    $featured = $allMedia->firstWhere('is_featured', true) ?? $allMedia->firstWhere('type', 'video_recap') ?? $allMedia->first();
    $videos = $allMedia->where('type', 'video_recap')->values();
    $pressItems = $allMedia->whereIn('type', ['press_release', 'article', 'whitepaper'])->values();
    $featuredEmbed = $featured ? ($featured->videoEmbedUrl() ?? $featured->link) : null;
    $featuredIsVideoFile = $featured ? $featured->isDirectVideo() : false;
@endphp

{{-- 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">
    <div class="grid md:grid-cols-12 gap-8 items-center reveal">
      <div class="md:col-span-7 lg:col-span-8">
        <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Media &amp; Highlights</span>
        <x-heading key="media_heading" tag="h1" default="Media &amp; Resources" class="font-display-xl text-white mb-6" />
        <p class="font-body-lg text-on-surface-variant max-w-lg mb-6">Official updates, summit highlights, photo galleries, recap videos, media coverage, and curated resources.</p>
        <div class="flex flex-wrap gap-3">
          @foreach(['Press','Photos','Videos'] as $pill)
          <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">{{ $pill }}</span>
          @endforeach
        </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">View Gallery</a>
          <a href="{{ route('media-coverage') }}" class="border border-border-subtle text-white px-6 py-3 rounded-xl font-bold text-sm hover:bg-white/10 transition-all">Press Coverage</a>
        </div>
      </div>
      <div class="md:col-span-5 lg:col-span-4">
        <div class="rounded-2xl bg-surface-elevation-1 border border-border-subtle p-6 text-center">
          <span class="material-symbols-outlined text-5xl text-primary/40 mb-3 block">play_circle</span>
          <p class="text-on-surface-variant text-sm">Latest Recap</p>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- Featured Media --}}
<section class="max-w-container-max mx-auto px-margin-mobile pb-12 reveal">
  @if($featured && $featuredEmbed)
  <div class="relative rounded-3xl overflow-hidden border border-border-subtle bg-gradient-to-br from-primary/5 via-transparent to-primary/5 min-h-[300px] md:min-h-[400px] flex items-center justify-center group">
    @if($featuredIsVideoFile)
    <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 }}"></iframe>
    @endif
    @if($featured->title)
    <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8 z-10 bg-gradient-to-t from-black/80 via-black/40 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>
      <h3 class="font-headline-lg text-xl md:text-2xl text-white">{{ $featured->title }}</h3>
      @if($featured->excerpt)<p class="text-white/70 text-sm mt-1 max-w-xl">{{ $featured->excerpt }}</p>@endif
    </div>
    @endif
  </div>
  @else
  <div class="relative rounded-3xl overflow-hidden border border-border-subtle bg-gradient-to-br from-primary/5 via-transparent to-primary/5 min-h-[300px] md:min-h-[400px] flex items-center justify-center group cursor-pointer">
    <div class="text-center p-10">
      <span class="w-20 h-20 rounded-full bg-surface-container flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
        <span class="material-symbols-outlined text-5xl text-primary">play_circle</span>
      </span>
      <h3 class="font-headline-lg text-2xl text-white mb-2">FFS 2026 Summit Highlights</h3>
      <p class="text-on-surface-variant text-sm">Watch the official recap video</p>
    </div>
  </div>
  @endif
</section>

{{-- Event Galleries --}}
<section class="max-w-container-max mx-auto px-margin-mobile pb-12 reveal">
  <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Galleries</span>
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Event Galleries</h2>
  <div class="grid md:grid-cols-3 gap-6">
    <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-5xl text-muted/30">photo_library</span>
      </div>
      <div class="p-5">
        <h3 class="font-bold text-white text-lg group-hover:text-primary transition-colors">February 2026</h3>
        <p class="text-on-surface-variant text-sm mt-1">View Photos</p>
      </div>
    </a>
    <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-5xl text-muted/30">photo_library</span>
      </div>
      <div class="p-5">
        <h3 class="font-bold text-white text-lg group-hover:text-primary transition-colors">Gallery</h3>
        <p class="text-on-surface-variant text-sm mt-1">Browse all photos</p>
      </div>
    </a>
    <div class="group rounded-2xl overflow-hidden border border-dashed border-border-subtle bg-surface-elevation-1">
      <div class="aspect-video bg-surface-container/50 flex items-center justify-center">
        <span class="material-symbols-outlined text-5xl text-muted/20">add_photo_alternate</span>
      </div>
      <div class="p-5">
        <h3 class="font-bold text-white/40 text-lg">Upcoming Summit Media</h3>
        <p class="text-on-surface-variant/40 text-sm mt-1">Coming Soon</p>
      </div>
    </div>
  </div>
</section>

{{-- Video Highlights --}}
<section class="max-w-container-max mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Video Highlights</h2>
  @if($videos->isNotEmpty())
  <div class="grid md:grid-cols-3 gap-6">
    @foreach($videos as $video)
    <div class="relative rounded-2xl overflow-hidden border border-border-subtle bg-surface-elevation-1 group">
      <div class="aspect-video bg-surface-container">
        @if($video->videoEmbedUrl())
        <iframe src="{{ $video->videoEmbedUrl() }}" class="w-full h-full" style="border:0;" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" title="{{ $video->title }}" loading="lazy"></iframe>
        @elseif($video->isDirectVideo())
        <video src="{{ $video->link }}" class="w-full h-full object-cover" controls playsinline></video>
        @else
        <div class="w-full h-full flex items-center justify-center">
          <div class="text-center">
            <span class="material-symbols-outlined text-4xl text-primary/40 block mb-2">play_circle</span>
            <span class="text-xs text-on-surface-variant">Video</span>
          </div>
        </div>
        @endif
      </div>
      <div class="p-4">
        <h3 class="font-bold text-white text-sm">{{ $video->title }}</h3>
        @if($video->excerpt)<p class="text-on-surface-variant text-xs mt-1">{{ $video->excerpt }}</p>@endif
        @if($video->link && !$video->videoEmbedUrl() && !$video->isDirectVideo())
        <a href="{{ $video->link }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-primary text-xs font-semibold mt-2 hover:gap-3 transition-all">Watch <span class="text-base">→</span></a>
        @endif
      </div>
    </div>
    @endforeach
  </div>
  @else
  <div class="grid md:grid-cols-3 gap-6">
    <div class="relative rounded-2xl overflow-hidden border border-border-subtle bg-surface-elevation-1 group cursor-pointer">
      <div class="aspect-video bg-surface-container flex items-center justify-center">
        <div class="text-center">
          <span class="material-symbols-outlined text-4xl text-primary/40 block mb-2">play_circle</span>
          <span class="text-xs text-on-surface-variant">FFS 2026 Recap</span>
        </div>
      </div>
      <div class="p-4">
        <h3 class="font-bold text-white text-sm">Summit 2026 Recap</h3>
        <p class="text-on-surface-variant text-xs mt-1">Key moments from the February gathering</p>
      </div>
    </div>
    <div class="relative rounded-2xl overflow-hidden border border-border-subtle bg-surface-elevation-1 group cursor-pointer">
      <div class="aspect-video bg-surface-container flex items-center justify-center">
        <div class="text-center">
          <span class="material-symbols-outlined text-4xl text-primary/40 block mb-2">play_circle</span>
          <span class="text-xs text-on-surface-variant">Speaker Interviews</span>
        </div>
      </div>
      <div class="p-4">
        <h3 class="font-bold text-white text-sm">Speaker Interviews</h3>
        <p class="text-on-surface-variant text-xs mt-1">Conversations with our featured speakers</p>
      </div>
    </div>
    <div class="relative rounded-2xl overflow-hidden border border-dashed border-border-subtle bg-surface-elevation-1 opacity-60">
      <div class="aspect-video bg-surface-container/50 flex items-center justify-center">
        <div class="text-center">
          <span class="material-symbols-outlined text-4xl text-muted/20 block mb-2">videocam</span>
          <span class="text-xs text-muted/30">Coming Soon</span>
        </div>
      </div>
      <div class="p-4">
        <h3 class="font-bold text-white/40 text-sm">More Videos</h3>
        <p class="text-on-surface-variant/40 text-xs mt-1">Additional content being uploaded</p>
      </div>
    </div>
  </div>
  @endif
</section>

{{-- Press / Media Coverage --}}
<section class="max-w-container-max mx-auto px-margin-mobile pb-12 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Press / Media Coverage</h2>
  @if($pressItems->isNotEmpty())
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
    @foreach($pressItems as $item)
    <div class="group cursor-pointer rounded-xl overflow-hidden border border-border-subtle hover:border-primary/40 transition-all bg-surface-elevation-1">
      <div class="aspect-[4/4.3] overflow-hidden bg-surface-container">
        @if($item->image)
        <img src="{{ asset('storage/'.$item->image) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy"/>
        @else
        <div class="w-full h-full flex items-center justify-center bg-surface-elevation-1">
          <span class="material-symbols-outlined text-4xl text-muted/30">description</span>
        </div>
        @endif
      </div>
      <div class="p-2">
        <p class="text-white text-[11px] font-bold text-center group-hover:text-primary transition-colors truncate">{{ $item->title }}</p>
        @if($item->link)<a href="{{ $item->link }}" target="_blank" rel="noopener" class="block text-center text-primary text-[10px] font-semibold mt-1">Read More →</a>@endif
      </div>
    </div>
    @endforeach
  </div>
  @else
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
    @php $papers = ['Daily City News','Today\'s Muslim','Daily Star Plus','Independent Karachi','Voice of City Karachi','Jung Newspaper','Daily Life on City','Dunya Newspaper','Tafseel Newspaper','Daily Peoples Life','Karachi 21 News','Daily Parwaan','Daily Mutaalba','Pakistan ki Awaz','Tehelka News','Qom ki Awaz','Daily Mehshar','Daily Kainat','Daily Askar International','Daily Jura\'at','Daily Parcham','Daily Muqadma','Daily Zamanat','Daily Evening Special','Aghaz e Inqilab','Daily Janbaz','Jahan Pakistan','Regional Times of Sindh','Daily Sarwan','Daily Karachi Mail'] @endphp
    @for($i = 1; $i <= 30; $i++)
    <div class="group cursor-pointer rounded-xl overflow-hidden border border-border-subtle hover:border-primary/40 transition-all bg-surface-elevation-1">
      <div class="aspect-[4/4.3] overflow-hidden bg-surface-container">
        <img src="{{ asset('images/media-coverage/m'.str_pad($i, 2, '0', STR_PAD_LEFT).'.jpeg') }}" alt="{{ $papers[$i-1] ?? 'Media' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy"/>
      </div>
      <div class="p-2">
        <p class="text-white text-[11px] font-bold text-center group-hover:text-primary transition-colors truncate">{{ $papers[$i-1] ?? 'Media' }}</p>
      </div>
    </div>
    @endfor
  </div>
  @endif
  <div class="text-center mt-8">
    <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>

{{-- CTA --}}
<section class="max-w-container-max 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-14 text-center">
    <span class="material-symbols-outlined text-5xl text-primary mb-4">connect</span>
    <h2 class="font-headline-lg text-2xl md:text-3xl text-white mb-3">Get Involved</h2>
    <p class="text-on-surface-variant max-w-lg mx-auto mb-8">Have media inquiries or want to collaborate? Contact our team for press passes, interviews, or partnership discussions.</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('get-involved') }}" class="border border-border-subtle text-white px-8 py-4 rounded-xl font-bold hover:bg-white/10 transition-all">Get Involved</a>
    </div>
  </div>
</section>

@endsection