@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('gallery_meta_title', 'Gallery - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('gallery_meta_description', 'Browse photos from the Faith & Future Summit.'))
@section('breadcrumbs', '[{"name":"Gallery"}]')

@section('content')
@php
$images = collect(File::files(public_path('images/gallery')))
    ->filter(fn($f) => in_array($f->getExtension(), ['jpg','jpeg','png','webp']))
    ->map(fn($f) => 'images/gallery/' . $f->getFilename())
    ->values();
@endphp

<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-6xl 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>Moments Captured<span class="w-8 h-px bg-primary"></span></span>
    <x-heading key="gallery_heading" tag="h1" default="Gallery" class="font-display-xl text-white mb-6" />
    <p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">A visual journey through the Faith & Future Summit 2026 — where scholars, leaders, and visionaries gathered for meaningful dialogue and collaboration.</p>
  </div>
</section>

<section class="max-w-7xl mx-auto px-margin-mobile pb-stack-xl">
  @if($images->isEmpty())
  <div class="text-center py-20"><span class="material-symbols-outlined text-7xl text-muted/30">photo_library</span><p class="mt-4 text-on-surface-variant">Gallery images coming soon.</p></div>
  @else
  <div class="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
    @foreach($images as $img)
    <div class="break-inside-avoid reveal group cursor-pointer relative overflow-hidden rounded-2xl border border-border-subtle hover:border-primary/40 transition-all">
      <img src="{{ asset($img) }}" alt="FFS Gallery" loading="lazy" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500"/>
      <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
        <span class="w-12 h-12 rounded-full bg-white/20 backdrop-blur flex items-center justify-center"><span class="material-symbols-outlined text-white text-2xl">zoom_in</span></span>
      </div>
    </div>
    @endforeach
  </div>
  @endif
</section>
@endsection