@extends('layouts.app')

@section('title', 'Gallery')

@section('content')
    <x-site.page-header eyebrow="Gallery" title="Moments From Across the Network" description="Explore photographs and videos documenting the activities of Tinubu Global Angels." />

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap justify-center gap-2">
                @foreach (['National Activities', 'Leadership Meetings', 'Women Empowerment', 'Community Outreach', 'State Activities', 'Zonal Activities', 'Diaspora Engagements', 'Conferences', 'Special Events'] as $category)
                    <span class="rounded-full bg-accent-50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-accent-700 ring-1 ring-accent-600/15">{{ $category }}</span>
                @endforeach
            </div>
            <div class="mt-12 rounded-2xl border-2 border-dashed border-stone-300 bg-stone-50 p-16 text-center">
                <svg class="mx-auto h-12 w-12 text-stone-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
                <p class="mt-4 font-medium text-stone-600">Photographs and videos will appear here soon.</p>
                <a href="{{ route('contact') }}" class="mt-4 inline-flex rounded-full border border-accent-600 px-6 py-2.5 text-sm font-semibold text-accent-600 transition hover:bg-accent-600 hover:text-white">Contact the Secretariat</a>
            </div>
        </div>
    </section>
@endsection