@extends('layouts.app')

@section('title', 'Home')

@section('content')
    {{-- Hero --}}
    <section class="relative overflow-hidden bg-white">
        <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent-600/40 to-transparent"></div>
        <div class="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8">
            <div class="max-w-3xl">
                <p class="reveal text-[13px] font-semibold uppercase tracking-[0.2em] text-accent-600">Tinubu Global Angels</p>
                <h1 class="reveal mt-4 text-4xl font-bold tracking-tight text-stone-900 sm:text-6xl" style="transition-delay: 60ms">
                    A network of women
                    <span class="bg-gradient-to-r from-accent-600 to-gold-400 bg-clip-text text-transparent">shaping leadership</span>
                    across Nigeria and the diaspora.
                </h1>
                <p class="reveal mt-6 max-w-xl text-lg leading-relaxed text-stone-600" style="transition-delay: 120ms">
                    Connecting national leadership with women at the grassroots — for leadership, service, empowerment, and community development.
                </p>
                <div class="reveal mt-10 flex flex-wrap gap-4" style="transition-delay: 180ms">
                    <a href="{{ route('join') }}" class="press inline-flex items-center justify-center rounded-full bg-accent-600 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-accent-600/20 transition hover:bg-accent-700">
                        Join the Network
                    </a>
                    <a href="{{ route('about') }}" class="press inline-flex items-center justify-center rounded-full bg-white px-8 py-4 text-base font-semibold text-stone-900 ring-1 ring-stone-900/10 transition hover:ring-stone-900/25">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- About preview --}}
    <x-site.section title="A network built around women and leadership">
        <x-slot:description>
            Tinubu Global Angels brings together women from different regions, professions, communities, and backgrounds under a structured national and diaspora network.
        </x-slot:description>
        <div class="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." class="reveal">
                <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." class="reveal" style="transition-delay: 80ms">
                <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." class="reveal" style="transition-delay: 160ms">
                <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>
    </x-site.section>
    {{-- Values --}}
    <section class="bg-stone-50">
        <div class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
            <div class="mx-auto max-w-2xl text-center reveal">
                <h2 class="text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">The principles that guide everything we do</h2>
            </div>
            <div class="mt-14 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="reveal 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>

    {{-- Leadership: typographic roster --}}
    <section class="bg-white">
        <div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
            <div class="flex flex-wrap items-baseline justify-between gap-4">
                <h2 class="reveal text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Meet the women leading the organization</h2>
                <a href="{{ route('leadership') }}" class="press text-sm font-semibold text-accent-600 transition hover:text-accent-700">Full leadership →</a>
            </div>
            <ul class="mt-12 divide-y divide-stone-900/10 border-y border-stone-900/10">
                @foreach ([
                    ['Barr. Tina Banku Agbor', 'President'],
                    ['Aisha Aliyu', 'Vice President — Diaspora, United Kingdom'],
                    ['Barr. Uzoaro Amuchechukwu Loveth', 'National Secretary — South East'],
                    ['Hajia Aishatu Tikau Adamu', 'National Treasurer — North West'],
                    ['Hon. Blessing Ekpo', 'National Organizing Secretary — Diaspora, Europe'],
                    ['Barr. Mrs. Sermun Deborah Aber', 'Coordinator — North Central'],
                ] as $leader)
                    <li class="reveal group flex flex-col gap-1 py-5 sm:flex-row sm:items-baseline sm:justify-between">
                        <span class="text-lg font-medium text-stone-900 transition-colors group-hover:text-accent-600">{{ $leader[0] }}</span>
                        <span class="text-sm text-stone-500">{{ $leader[1] }}</span>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- Activities --}}
    <x-site.section title="Connecting women through purposeful activities">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['Women Empowerment', 'Supporting initiatives and opportunities that help women develop skills, knowledge, confidence, and capacity.', 'M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM12 18.75a6.375 6.375 0 00-6.375-6.375H12a6.375 6.375 0 006.375 6.375z'],
                ['Leadership Development', 'Creating opportunities for women to connect with experienced leaders and participate in leadership-focused activities.', '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'],
                ['Community Engagement', 'Supporting community-focused programmes and activities based on identified local needs.', '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'],
                ['Networking', 'Connecting women across professions, communities, regions, and countries.', 'M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.82-2.82a4.5 4.5 0 00-1.242-7.244l-4.5-4.5a4.5 4.5 0 00-6.364 6.364L4.757 9.257'],
                ['Capacity Building', 'Promoting learning, skills development, mentorship, and knowledge sharing.', 'M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5z'],
                ['Events and Programmes', 'Coordinating meetings, conferences, outreach activities, workshops, and community programmes.', 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'],
            ] as $item)
                <x-site.card :title="$item[0]" :description="$item[1]" class="reveal">
                    <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>
    </x-site.section>

    {{-- CTA --}}
    <section class="relative overflow-hidden bg-accent-800">
        <div class="absolute -top-24 right-0 h-80 w-80 rounded-full bg-gold-400/15 blur-3xl"></div>
        <div class="relative mx-auto max-w-7xl px-4 py-24 text-center sm:px-6 lg:px-8">
            <h2 class="reveal mx-auto max-w-3xl text-3xl font-bold tracking-tight text-white sm:text-5xl">Ready to connect with Tinubu Global&nbsp;Angels?</h2>
            <p class="reveal mx-auto mt-5 max-w-[55ch] text-lg leading-relaxed text-white/80" style="transition-delay: 100ms">Women interested in participating in the organization's activities can register through the official platform.</p>
            <a href="{{ route('join') }}" class="press reveal mt-10 inline-flex items-center justify-center rounded-full bg-white px-9 py-4 text-base font-semibold text-accent-800 shadow-xl transition hover:bg-stone-100" style="transition-delay: 180ms">
                Join the Network
            </a>
        </div>
    </section>
@endsection