@extends('layouts.app')

@section('title', 'Women Empowerment')

@section('content')
    <x-site.page-header eyebrow="Women Empowerment" title="Creating Opportunities for Women to Participate and Grow" description="Women contribute across communities, businesses, institutions, professions, families, and public life." />

    <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 provides a platform where women can connect with one another, share experiences, participate in programmes, and discover opportunities for personal and professional development.
            </p>
        </div>
        <div class="mx-auto mt-12 max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 class="text-center text-2xl font-bold text-stone-900">Areas of Focus</h2>
            <div class="mt-10 flex flex-wrap justify-center gap-3">
                @foreach ([
                    'Women Entrepreneurship', 'Leadership Development', 'Skills Acquisition', 'Mentorship',
                    'Professional Networking', 'Community Engagement', 'Capacity Building', 'Women and Youth Engagement',
                ] as $area)
                    <span class="rounded-full bg-gradient-to-r from-accent-50 to-gold-400/10 px-6 py-3 text-sm font-semibold text-accent-700 ring-1 ring-accent-600/15">{{ $area }}</span>
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-gradient-to-r from-accent-800 to-accent-600">
        <div class="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-white">Be Part of the Movement</h2>
            <a href="{{ route('join') }}" class="mt-8 inline-flex rounded-full bg-white px-8 py-3.5 font-semibold text-accent-700 shadow-lg transition hover:bg-stone-100">Join the Network</a>
        </div>
    </section>
@endsection