@extends('layouts.app')

@section('title', 'News & Updates')

@section('content')
    <x-site.page-header eyebrow="News and Updates" title="Latest From Tinubu Global Angels" description="Follow verified updates from the organization." />

    <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 (['Leadership', 'Women Empowerment', 'Community Activities', 'State Chapters', 'Zonal Activities', 'Diaspora Activities', 'Events', 'Announcements', 'Organizational Updates'] as $category)
                    <span class="rounded-full bg-stone-100 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-stone-600 ring-1 ring-stone-200">{{ $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="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"/></svg>
                <p class="mt-4 font-medium text-stone-600">Articles will be published here soon.</p>
                <p class="mt-1 text-sm text-stone-500">Each article will include the publication date, location where relevant, photographs, and the full story.</p>
            </div>
        </div>
    </section>
@endsection