@extends('layouts.app')

@section('content')
    <section class="a4w-section">
        <div class="grid gap-8 lg:grid-cols-2">
            <div>
                <span class="a4w-kicker">Contact</span>
                <h1 class="mt-4 a4w-heading">Contact Us</h1>
                <p class="mt-4 text-slate-600">Talk to our team for onboarding, partnerships, and support.</p>
                <div class="mt-8 space-y-3 text-sm text-slate-600">
                    <p>Email: support@aim4wellness.test</p>
                    <p>Phone: +255 700 000 000</p>
                    <p>Address: Dar es Salaam, Tanzania</p>
                </div>
            </div>

            <x-card class="a4w-soft-panel p-8">
                @if (session('status'))
                    <div class="mb-4 rounded-xl bg-emerald-100 p-4 text-sm text-emerald-800 ring-1 ring-emerald-200">{{ session('status') }}</div>
                @endif
                <form method="POST" action="{{ route('contact.submit') }}" class="space-y-4" novalidate>
                    @csrf
                    <div>
                        <label for="contact-name" class="mb-1 block text-sm font-medium text-slate-700">Name</label>
                        <input id="contact-name" type="text" name="name" autocomplete="name" class="w-full rounded-xl border-slate-200 p-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required>
                    </div>
                    <div>
                        <label for="contact-email" class="mb-1 block text-sm font-medium text-slate-700">Email</label>
                        <input id="contact-email" type="email" name="email" autocomplete="email" class="w-full rounded-xl border-slate-200 p-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required>
                    </div>
                    <div>
                        <label for="contact-message" class="mb-1 block text-sm font-medium text-slate-700">Message</label>
                        <textarea id="contact-message" name="message" rows="5" class="w-full rounded-xl border-slate-200 p-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required></textarea>
                    </div>
                    <x-button type="submit">Send Message</x-button>
                </form>
            </x-card>
        </div>
    </section>
@endsection