@extends('layouts.app')

@section('title', 'Our National Reach')

@section('content')
    <x-site.page-header eyebrow="Our National Reach" title="From Communities to the National Network" description="Tinubu Global Angels is building a coordinated network that connects women across Nigeria's geopolitical zones and the diaspora." />

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['North Central', 'Connecting women and representatives across the North Central region.'],
                    ['North East', 'Building regional connections and participation across the North East.'],
                    ['North West', 'Coordinating women and activities across the North West.'],
                    ['South East', 'Connecting women and representatives across the South East.'],
                    ['South South', 'Supporting regional coordination and engagement across the South South.'],
                    ['South West', 'Connecting women and representatives across the South West.'],
                    ['Diaspora', 'Connecting participating women outside Nigeria, with representation across international communities.'],
                ] as $zone)
                    <div class="rounded-2xl bg-gradient-to-br from-stone-50 to-accent-50 p-6 ring-1 ring-stone-200 transition hover:ring-accent-600/20">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-600 text-white font-bold text-sm">
                            {{ collect(explode(' ', $zone[0]))->map(fn ($w) => mb_substr($w, 0, 1))->implode('') }}
                        </div>
                        <h2 class="mt-4 font-semibold text-stone-900">{{ $zone[0] }}</h2>
                        <p class="mt-2 text-sm leading-relaxed text-stone-600">{{ $zone[1] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection