@extends('layouts.app')

@section('title', 'Our Leadership')

@section('content')
    <x-site.page-header eyebrow="Our Leadership" title="Meet the Women Leading the Organization" description="Tinubu Global Angels is coordinated through national leadership, geopolitical-zone representation, and diaspora leadership structures." />

    <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-3">
                @foreach ([
                    ['Barr. Tina Banku Agbor', 'President, Tinubu Global Angels', 'Provides overall leadership and coordination for the Tinubu Global Angels organization.'],
                    ['Aisha Aliyu', 'Vice President — Diaspora, United Kingdom', "Represents the organization's diaspora structure in the United Kingdom and contributes to coordination and engagement with women outside Nigeria."],
                    ['Barr. Uzoaro Amuchechukwu Loveth', 'National Secretary — South East Geopolitical Zone', 'Serves as National Secretary, supporting organizational records, communication, administration, and coordination.'],
                    ['Hajia Aishatu Tikau Adamu', 'National Treasurer — North West Geopolitical Zone', "Serves as National Treasurer, supporting the organization's financial administration and resource coordination."],
                    ['Hon. Blessing Ekpo', 'National Organizing Secretary — Diaspora, Europe', 'Supports organizational coordination and engagement across the European diaspora structure.'],
                    ['Barr. Mrs. Sermun Deborah Aber', 'Coordinator — North Central Geopolitical Zone', 'Is the present Secretary to the Government of Benue State and serves as Coordinator for the North Central Geopolitical Zone.'],
                    ['Engr. Prof. (Mrs.) Ongoebi Maureen Orubide Etebu', 'Coordinator — South South Geopolitical Zone', "Coordinates the organization's activities and representation across the South South Geopolitical Zone."],
                    ['Ambassador Dr. Chief Hassana Saminu Turaki, JP', 'Coordinator — North West Geopolitical Zone', 'Serves as Coordinator for the North West Geopolitical Zone.'],
                    ['Hon. Diyiokeh Uchenna', 'Coordinator — South East Geopolitical Zone', 'Serves as Coordinator for the South East Geopolitical Zone.'],
                ] as $leader)
                    <div class="rounded-2xl bg-white p-6 text-center shadow-sm ring-1 ring-stone-200 transition hover:shadow-md">
                        <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-accent-600 to-gold-400 text-2xl font-bold text-white">
                            {{ collect(explode(' ', $leader[0]))->filter(fn ($w) => preg_match('/^[A-Z]/', $w) && Str::length($w) > 2)->map(fn ($w) => mb_substr($w, 0, 1))->take(2)->implode('') ?: 'TG' }}
                        </div>
                        <h2 class="mt-4 font-semibold text-stone-900">{{ $leader[0] }}</h2>
                        <p class="mt-1 text-sm font-medium text-accent-600">{{ $leader[1] }}</p>
                        <p class="mt-3 text-sm leading-relaxed text-stone-600">{{ $leader[2] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection