@extends('layouts.app')

@section('title', '📬 تواصل معنا · جيش الوفاء الذهبي')

@push('head')
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
<style>
    body { font-family: 'Tajawal', sans-serif !important; }
</style>
@endpush

@section('content')

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 px-4 py-12">

    <div class="max-w-3xl mx-auto bg-slate-900/70 border border-emerald-400/40 rounded-3xl shadow-xl p-8 md:p-10">
        
        <h1 class="text-center text-2xl font-extrabold text-white mb-4">
            تواصل معنا 📬
        </h1>
        
        <p class="text-center text-slate-300 text-sm mb-6 leading-relaxed">
            إذا عندك سؤال، اقتراح، أو استفسار، اكتب لنا وسنعاود الرد بأسرع وقت ممكن! 💬
        </p>

        @if(session('success'))
            <div class="bg-emerald-700 text-white p-3 rounded-md mb-4 text-center text-sm">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-700 text-white p-3 rounded-md mb-4 text-sm">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('contact.send') }}" method="POST" class="space-y-4">
            @csrf

            <div>
                <label class="text-slate-200 text-sm font-semibold">اسمك</label>
                <input type="text" name="name" value="{{ old('name') }}"
                    class="w-full rounded-lg bg-slate-800 border border-slate-600 text-white px-3 py-2 focus:outline-none"
                    placeholder="اكتب اسمك">
            </div>

            <div>
                <label class="text-slate-200 text-sm font-semibold">البريد الإلكتروني</label>
                <input type="email" name="email" value="{{ old('email') }}"
                    class="w-full rounded-lg bg-slate-800 border border-slate-600 text-white px-3 py-2 focus:outline-none"
                    placeholder="name@example.com">
            </div>

            <div>
                <label class="text-slate-200 text-sm font-semibold">الرسالة</label>
                <textarea name="message" rows="5"
                    class="w-full rounded-lg bg-slate-800 border border-slate-600 text-white px-3 py-2 focus:outline-none"
                    placeholder="اكتب رسالتك هنا...">{{ old('message') }}</textarea>
            </div>

            <button type="submit"
                class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2 rounded-lg transition-all">
                إرسال الرسالة
            </button>
        </form>

    </div>

</div>

@endsection