@extends('layouts.app')

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

@section('content')
    <x-site.page-header eyebrow="Contact Us" title="Connect With Tinubu Global Angels" description="For general enquiries, organizational information, events, partnerships, media enquiries, and membership-related matters, contact the Tinubu Global Angels coordination team." />

    <section class="py-16 bg-white">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid gap-10 lg:grid-cols-2">
            <div class="rounded-2xl bg-stone-50 p-8 ring-1 ring-stone-200">
                <h2 class="text-xl font-bold text-stone-900">National Secretariat</h2>
                <dl class="mt-6 space-y-5 text-sm">
                    <div>
                        <dt class="font-semibold uppercase tracking-wide text-accent-600">Organization</dt>
                        <dd class="mt-1 text-stone-700">Tinubu Global Angels</dd>
                    </div>
                    <div>
                        <dt class="font-semibold uppercase tracking-wide text-accent-600">Email</dt>
                        <dd class="mt-1 text-stone-700">[Official Email]</dd>
                    </div>
                    <div>
                        <dt class="font-semibold uppercase tracking-wide text-accent-600">Phone</dt>
                        <dd class="mt-1 text-stone-700">[Official Phone Number]</dd>
                    </div>
                    <div>
                        <dt class="font-semibold uppercase tracking-wide text-accent-600">Address</dt>
                        <dd class="mt-1 text-stone-700">[Official Secretariat Address]</dd>
                    </div>
                </dl>
                <h3 class="mt-8 text-sm font-semibold uppercase tracking-wide text-stone-900">Social Media</h3>
                <div class="mt-3 flex flex-wrap gap-2">
                    @foreach (['Facebook', 'Instagram', 'X', 'TikTok', 'YouTube'] as $social)
                        <span class="rounded-full bg-white px-4 py-2 text-sm font-medium text-stone-700 ring-1 ring-stone-300">{{ $social }}</span>
                    @endforeach
                </div>
            </div>

            <div class="rounded-2xl bg-gradient-to-br from-accent-800 to-accent-600 p-8 text-white sm:p-10">
                <h2 class="text-2xl font-bold">Contact the Secretariat</h2>
                <p class="mt-4 text-white/85">Send us a message and the appropriate coordination team will get back to you.</p>
                <form class="mt-8 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-white/85">Full Name</label>
                        <input type="text" class="mt-2 block w-full rounded-xl border-transparent bg-white/10 text-white placeholder-white/60 focus:border-white focus:ring-white sm:text-sm" placeholder="Your name">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-white/85">Email Address</label>
                        <input type="email" class="mt-2 block w-full rounded-xl border-transparent bg-white/10 text-white placeholder-white/60 focus:border-white focus:ring-white sm:text-sm" placeholder="you@example.com">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-white/85">Subject</label>
                        <input type="text" class="mt-2 block w-full rounded-xl border-transparent bg-white/10 text-white placeholder-white/60 focus:border-white focus:ring-white sm:text-sm" placeholder="General enquiry">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-white/85">Message</label>
                        <textarea rows="5" class="mt-2 block w-full rounded-xl border-transparent bg-white/10 text-white placeholder-white/60 focus:border-white focus:ring-white sm:text-sm" placeholder="How can we help?"></textarea>
                    </div>
                    <button type="button" class="w-full rounded-full bg-white px-8 py-3.5 font-semibold text-accent-700 shadow-lg transition hover:bg-stone-100">Send Message</button>
                </form>
            </div>
        </div>
    </section>
@endsection