@extends('layouts.app')

@section('title', 'Events')

@section('content')
    <x-site.page-header eyebrow="Events" title="Upcoming Events" description="Stay informed about upcoming Tinubu Global Angels programmes and organizational activities." />

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div class="rounded-2xl border-2 border-dashed border-stone-300 bg-stone-50 p-12 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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/></svg>
                <p class="mt-4 font-medium text-stone-600">No upcoming events have been announced yet.</p>
                <p class="mt-1 text-sm text-stone-500">Each listing will include event name, date, time, venue, location, description, and registration information.</p>
            </div>
        </div>
    </section>

    <section class="py-16 bg-stone-50">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-2xl font-bold text-stone-900">Past Events</h2>
            <p class="mt-3 text-stone-600">Explore previous meetings, programmes, conferences, outreach activities, and organizational engagements.</p>
            <a href="{{ route('gallery') }}" class="mt-6 inline-flex rounded-full bg-accent-600 px-8 py-3.5 text-sm font-semibold text-white transition hover:bg-accent-700">View Event Archive</a>
        </div>
    </section>
@endsection