@extends('layouts.app')

@section('title', 'About Us')

@section('content')
    <x-site.page-header eyebrow="About the Organization" title="About Tinubu Global Angels" description="A Network Built Around Women and Leadership." />

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <p class="text-lg leading-relaxed text-stone-700">
                Tinubu Global Angels brings together women from different regions, professions, communities, and backgrounds under a structured national and diaspora network.
            </p>
            <p class="mt-4 leading-relaxed text-stone-600">
                The organization provides a platform for women to connect with one another, participate in organized activities, support community initiatives, develop leadership relationships, and contribute their skills and experience.
            </p>
            <p class="mt-4 leading-relaxed text-stone-600">
                With leadership representation across Nigeria's geopolitical zones and the diaspora, Tinubu Global Angels is structured to create connections between national leadership and women at the grassroots.
            </p>
        </div>
    </section>

    <section class="py-16 bg-stone-50">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid gap-6 md:grid-cols-3">
            <x-site.card title="Our Vision" description="To build a connected network of empowered women who participate meaningfully in leadership, community development, and organized social activities.">
                <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="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                </x-slot:icon>
            </x-site.card>
            <x-site.card title="Our Mission" description="To provide a structured platform through which women can connect, participate, develop their leadership capacity, support community initiatives, and build meaningful networks across Nigeria and the diaspora.">
                <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="M3 3v18h18M7.5 15l3-4 3 2.25L18 7" /></svg>
                </x-slot:icon>
            </x-site.card>
            <x-site.card title="Our Purpose" description="Connecting national leadership with women at the grassroots — across every geopolitical zone and the diaspora — for leadership, service, and community development.">
                <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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
                </x-slot:icon>
            </x-site.card>
        </div>
    </section>

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <h2 class="text-center text-3xl font-bold tracking-tight text-stone-900">Our Values</h2>
            <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
                @foreach ([
                    ['Leadership', 'Encouraging women to take responsibility and contribute their skills and experience.'],
                    ['Unity', 'Connecting women across geographical, professional, and cultural backgrounds.'],
                    ['Empowerment', 'Creating opportunities for women to learn, develop, and participate.'],
                    ['Service', 'Supporting initiatives that respond to identified community needs.'],
                    ['Integrity', 'Promoting responsible, transparent, and accountable organizational conduct.'],
                ] as $value)
                    <div class="rounded-2xl bg-gradient-to-br from-accent-50 to-gold-400/10 p-6 text-center ring-1 ring-accent-600/10">
                        <h3 class="font-semibold text-accent-700">{{ $value[0] }}</h3>
                        <p class="mt-2 text-sm leading-relaxed text-stone-600">{{ $value[1] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection