@extends('layouts.app')

@section('title', 'Join the Network')

@section('content')
    @if (request()->boolean('registered'))
        <section class="py-24 bg-white">
            <div class="mx-auto max-w-2xl px-4 text-center sm:px-6">
                <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100">
                    <svg class="h-10 w-10 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                </div>
                <h1 class="mt-6 text-3xl font-bold tracking-tight text-stone-900">Thank You!</h1>
                <p class="mt-4 text-lg text-stone-600">Thank you for expressing your interest in Tinubu Global Angels.</p>
                <p class="mt-2 text-stone-600">Your information has been received and may be reviewed by the appropriate organizational coordination team.</p>
                <a href="{{ route('home') }}" class="mt-8 inline-flex rounded-full bg-accent-600 px-8 py-3.5 text-sm font-semibold text-white transition hover:bg-accent-700">Back to Home</a>
            </div>
        </section>
    @else
        <x-site.page-header eyebrow="Join the Network" title="Connect With Tinubu Global Angels" description="Women who are interested in participating in the organization's activities can submit their details through the official registration form." />

        <section class="py-16 bg-white">
            <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
                <form method="GET" action="{{ route('join') }}" class="rounded-2xl bg-stone-50 p-8 ring-1 ring-stone-200 sm:p-10">
                    <input type="hidden" name="registered" value="1">
                    <div class="grid gap-6 sm:grid-cols-2">
                        @foreach ([
                            'Full Name' => 'text', 'Phone Number' => 'tel', 'Email Address' => 'email',
                            'State' => 'text', 'Local Government Area' => 'text', 'Country' => 'text',
                            'Profession' => 'text', 'Organization' => 'text', 'Area of Interest' => 'text',
                            'Preferred Chapter or Zone' => 'text', 'How Would You Like to Participate?' => 'text',
                        ] as $label => $type)
                            <div @class(['sm:col-span-2' => in_array($label, ['Full Name', 'Email Address', 'How Would You Like to Participate?'])])>
                                <label class="block text-sm font-medium text-stone-700">{{ $label }}</label>
                                <input type="{{ $type }}" name="{{ Str::slug($label, '_') }}" required
                                       class="mt-2 block w-full rounded-xl border-stone-300 shadow-sm focus:border-accent-600 focus:ring-accent-600 sm:text-sm">
                            </div>
                        @endforeach
                    </div>
                    <button type="submit" class="mt-8 w-full rounded-full bg-accent-600 px-8 py-4 text-base font-semibold text-white shadow-lg transition hover:bg-accent-700">
                        Submit Registration
                    </button>
                </form>
            </div>
        </section>
    @endif
@endsection