@extends('layouts.public')

@section('title', 'स्वयंसेवक बनें | Volunteer Registration - Vishwas Sanstha Mata Maharani')

@section('content')
<!-- HERO -->
<section class="bg-gradient-to-r from-navy via-royal to-navy text-white py-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#C6A15B_1px,transparent_1px)] [background-size:16px_16px]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <span class="inline-block bg-gold/20 text-gold border border-gold/40 text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-3">
            सेवा ही साधना
        </span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading text-white mb-4">
            विश्वास समाज कल्याण स्वयंसेवक बनें
        </h1>
        <p class="text-gold-light max-w-2xl mx-auto text-base sm:text-lg">
            अपने समय, कौशल और सेवाभाव से वंचितों के जीवन में उम्मीद का दीप जलाएं। विश्वास संस्था माता महारानी के सेवा परिवार से जुड़ें।
        </p>
    </div>
</section>

<!-- FORM & VOLUNTEER PILLARS -->
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('success'))
            <div class="mb-8 bg-emerald-50 border-2 border-emerald-500 p-5 rounded-2xl shadow-lg flex items-start gap-4">
                <div class="h-10 w-10 rounded-full bg-emerald-500 text-white flex items-center justify-center text-xl flex-shrink-0">
                    <i class="fa-solid fa-heart"></i>
                </div>
                <div>
                    <h3 class="text-base font-bold text-emerald-900">हार्दिक धन्यवाद!</h3>
                    <p class="text-sm text-emerald-800 mt-1">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- VOLUNTEER REGISTRATION FORM (2 COLS) -->
            <div class="lg:col-span-2 bg-white rounded-3xl p-6 sm:p-10 border border-gray-200 shadow-sm">
                <div class="border-b pb-4 mb-6">
                    <h2 class="text-2xl font-bold text-navy font-heading">स्वयंसेवक ऑनलाइन पंजीकरण</h2>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5">कृपया अपनी रुचि का क्षेत्र और उपलब्धता का समय अंकित करें।</p>
                </div>

                <form action="{{ route('volunteer.submit') }}" method="POST" class="space-y-5">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">पूरा नाम *</label>
                            <input type="text" name="name" required value="{{ old('name') }}" placeholder="आपका पूरा नाम"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                            @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">मोबाइल नंबर *</label>
                            <input type="text" name="phone" required value="{{ old('phone') }}" placeholder="10 अंकों का फोन नंबर"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                            @error('phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">ईमेल पता (वैकल्पिक)</label>
                            <input type="email" name="email" value="{{ old('email') }}" placeholder="yourname@gmail.com"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                            @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">शहर / कस्बा *</label>
                            <input type="text" name="city" required value="{{ old('city') }}" placeholder="उदा. जबलपुर, कटनी, मंडला"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                            @error('city') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">सेवा का पसंदीदा क्षेत्र *</label>
                            <select name="interest_area" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold bg-white">
                                <option value="">-- सेवा क्षेत्र चुनें --</option>
                                <option value="ambulance_medical">एम्बुलेंस व आपातकालीन स्वास्थ्य सेवा (Ambulance Support)</option>
                                <option value="food_distribution">अन्नपूर्णा भोजन वितरण सेवा (Food Distribution)</option>
                                <option value="teerth_yatra">तीर्थयात्रा व्यवस्था एवं सेवा दल (Pilgrimage Volunteer)</option>
                                <option value="education_support">शिक्षा संबल व बच्चों का शिक्षण (Education Support)</option>
                                <option value="model_colony">मॉडल कॉलोनी ग्राम विकास कार्य (Model Colony Work)</option>
                                <option value="environment_trees">पर्यावरण एवं सघन पौधरोपण अभियान (Tree Plantation)</option>
                            </select>
                            @error('interest_area') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">साप्ताहिक उपलब्ध समय *</label>
                            <select name="available_hours_weekly" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold bg-white">
                                <option value="2-4 hours">2 से 4 घंटे प्रति सप्ताह (सप्ताहांत)</option>
                                <option value="5-10 hours">5 से 10 घंटे प्रति सप्ताह</option>
                                <option value="10+ hours">10 घंटे से अधिक प्रति सप्ताह</option>
                                <option value="full_time_event">केवल विशेष आयोजनों/शिविरों में</option>
                            </select>
                            @error('available_hours_weekly') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">पूर्व अनुभव या विशेष कौशल (वैकल्पिक)</label>
                        <textarea name="experience_or_skills" rows="3" placeholder="उदा. प्राथमिक चिकित्सा ज्ञान, वाहन चालन, शिक्षण अनुभव, कम्प्यूटर कौशल..."
                                  class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">{{ old('experience_or_skills') }}</textarea>
                    </div>

                    <button type="submit" class="w-full sm:w-auto px-8 py-3.5 bg-navy hover:bg-gold hover:text-navy text-white font-bold rounded-xl text-sm transition shadow-md flex items-center justify-center gap-2">
                        <i class="fa-solid fa-hands-holding-heart text-gold"></i>
                        <span>पंजीकरण सबमिट करें (Join Volunteer Family)</span>
                    </button>
                </form>
            </div>

            <!-- RIGHT COL: VOLUNTEER BENEFITS & COMMUNITY SPIRIT -->
            <div class="space-y-6">
                <div class="bg-gradient-to-br from-navy to-royal text-white rounded-3xl p-6 border border-gold/30">
                    <h3 class="text-base font-bold text-gold mb-3 flex items-center gap-2">
                        <i class="fa-solid fa-certificate"></i> स्वयंसेवक सम्मान व प्रमाण पत्र
                    </h3>
                    <p class="text-xs text-gray-300 leading-relaxed mb-4">
                        विश्वास संस्था माता महारानी द्वारा सभी समर्पित स्वयंसेवकों को 50 घंटे की सेवा पूर्ण होने पर आधिकारिक समाज सेवा प्रमाण पत्र एवं वार्षिक सम्मेलन में सम्मानित किया जाता है।
                    </p>
                    <ul class="text-xs space-y-2 text-gray-200">
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-gold"></i> आधिकारिक स्वयंसेवक पहचान पत्र (ID Card)</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-gold"></i> प्राथमिक चिकित्सा एवं आपातकालीन कार्यशालाएं</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-gold"></i> तीर्थयात्रा जत्थों में सेवा दल का दायित्व</li>
                    </ul>
                </div>

                <div class="bg-white rounded-3xl p-6 border border-gray-200 shadow-sm text-center">
                    <div class="h-12 w-12 rounded-full bg-gold/20 text-gold flex items-center justify-center mx-auto mb-3 text-xl">
                        <i class="fa-solid fa-phone"></i>
                    </div>
                    <h4 class="font-bold text-navy text-sm">सीधे स्वयंसेवक समन्वयक से बात करें</h4>
                    <p class="text-xs text-gray-500 mt-1 mb-3">हेल्पलाइन: +91 9485877237</p>
                    <a href="tel:+919485877237" class="inline-block px-5 py-2 bg-navy text-white text-xs font-bold rounded-lg hover:bg-gold hover:text-navy transition">
                        अभी कॉल करें
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection