@extends('layouts.app')

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

@section('content')
    <x-site.page-header eyebrow="Our Structure" title="Connecting Women Across Nigeria and the Diaspora" description="Tinubu Global Angels operates through a coordinated structure designed to connect national leadership with women and representatives across different regions." />

    <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 ([
                    ['National Leadership', 'The national leadership provides overall organizational coordination, administration, communication, and strategic direction.', 'M12 3l2.4 4.86 5.6.81-4 3.94.94 5.58L12 15.77l-4.94 2.42.94-5.58-4-3.94 5.6-.81z'],
                    ['Geopolitical Zones', "The organization maintains representation across Nigeria's geopolitical zones, providing regional coordination and engagement.", 'M12 21a9 9 0 100-18 9 9 0 000 18zm0-18v18'],
                    ['State Chapters', 'State-level structures provide opportunities for women to participate in activities and organizational programmes within their respective states.', 'M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15'],
                    ['Grassroots Network', 'Local structures create connections between the organization and women within communities.', 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z'],
                    ['Diaspora Network', 'The diaspora structure connects participating women outside Nigeria, including representation in the United Kingdom and Europe.', 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418'],
                ] as $item)
                    <x-site.card :title="$item[0]" :description="$item[1]">
                        <x-slot:icon>
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $item[2] }}" /></svg>
                        </x-slot:icon>
                    </x-site.card>
                @endforeach
            </div>
            <div class="mt-12 text-center">
                <a href="{{ route('reach') }}" class="inline-flex items-center gap-2 rounded-full bg-accent-600 px-8 py-3.5 text-sm font-semibold text-white transition hover:bg-accent-700">
                    Explore Our National Reach <span aria-hidden="true">→</span>
                </a>
            </div>
        </div>
    </section>
@endsection