@extends('layouts.app')

@section('title', 'Activities')

@section('content')
    <x-site.page-header eyebrow="Activities" title="Making the Network Visible Through Action" description="The organization documents and shares its programmes, meetings, outreach activities, leadership engagements, empowerment initiatives, and community events." />

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-bold text-stone-900">Recent Activities</h2>
            <p class="mt-3 text-stone-600">Verified activities will be published here as they occur. Each activity entry will display:</p>
            <ul class="mt-6 grid gap-4 sm:grid-cols-2">
                @foreach (['Activity Title', 'Location', 'Date', 'Organized By', 'Short Description', 'Photographs', 'Full Report'] as $field)
                    <li class="flex items-center gap-3 rounded-xl bg-stone-50 px-5 py-4 ring-1 ring-stone-200">
                        <svg class="h-5 w-5 text-accent-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                        <span class="font-medium text-stone-800">{{ $field }}</span>
                    </li>
                @endforeach
            </ul>
            <div class="mt-12 rounded-2xl border-2 border-dashed border-stone-300 bg-stone-50 p-12 text-center">
                <p class="text-stone-500">Activity reports and photographs will appear here soon.</p>
                <a href="{{ route('gallery') }}" 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">View Gallery</a>
            </div>
        </div>
    </section>
@endsection