@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('media_coverage_meta_title', 'Media Coverage - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('media_coverage_meta_description', 'Explore press coverage of the Faith & Future Summit.'))

@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>
  <div class="max-w-4xl mx-auto text-center relative z-10 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>In the Press<span class="w-8 h-px bg-primary"></span></span>
    <x-heading key="media_coverage_heading" tag="h1" default="Media Coverage" class="font-display-xl text-white mb-6" />
    <p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">The Faith & Future Summit 2026 received extensive coverage across leading national newspapers and media platforms, recognizing the summit as a significant platform for faith-informed scholarship and interdisciplinary dialogue.</p>
  </div>
</section>

{{-- Feature Image --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-16 reveal">
  <div class="rounded-3xl overflow-hidden border border-border-subtle">
    <img src="{{ asset('images/media-coverage/media-hero.jpeg') }}" alt="Daily Evening News Karachi" class="w-full"/>
  </div>
  <p class="text-center text-on-surface-variant text-sm mt-4">Featured on Daily Evening News Karachi</p>
</section>

{{-- Press Grid --}}
<section class="max-w-7xl mx-auto px-margin-mobile pb-stack-xl">
  <h2 class="font-headline-lg text-headline-lg text-white text-center mb-12 reveal">Featured in Leading National Publications</h2>
  <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="reveal group cursor-pointer rounded-xl overflow-hidden border border-border-subtle hover:border-primary/40 transition-all bg-surface-elevation-1" style="transition-delay: {{ ($i % 5) * 50 }}ms">
      <div class="aspect-[4/4.3] overflow-hidden">
        <img src="{{ asset('images/media-coverage/m'.str_pad($i, 2, '0', STR_PAD_LEFT).'.jpeg') }}" alt="{{ $papers[$i-1] ?? 'Media Coverage' }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy"/>
      </div>
      <div class="p-3">
        <p class="text-white font-bold text-xs text-center leading-snug group-hover:text-primary transition-colors">{{ $papers[$i-1] ?? 'Media Coverage ' . $i }}</p>
      </div>
    </div>
    @endfor
  </div>
</section>

{{-- Summary --}}
<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-8 md:p-12 text-center">
    <span class="material-symbols-outlined text-5xl text-primary mb-4">newspaper</span>
    <h3 class="font-headline-lg text-2xl text-white mb-4">Recognized Across the Nation</h3>
    <p class="text-on-surface-variant text-[17px] leading-[1.7]">Prominent publications highlighted the summit's impact, distinguished guests, academic contributions, and scholarship announcements — affirming its role as a transformative platform for ethical leadership and intellectual engagement.</p>
  </div>
</section>

@endsection