@extends('layouts.public')

@section('title', 'संपर्क करें (Contact Us) | Vishwas Bank')

@section('content')
<div class="bg-navy text-white py-14 border-b-2 border-gold relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <span class="text-xs uppercase tracking-widest text-gold font-bold">सहयोग एवं मार्गदर्शन</span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading mt-2">संपर्क सूत्र (Contact Us)</h1>
        <p class="text-gray-300 text-sm sm:text-base mt-2 max-w-2xl">
            किसी भी सहायता, ऋण मार्गदर्शन, तीर्थयात्रा पूछताछ अथवा एम्बुलेंस सेवा हेतु हमसे संपर्क करें।
        </p>
    </div>
</div>

<div class="py-16 bg-[#FAF7F2]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
            
            <!-- Left Contact Info Cards -->
            <div class="lg:col-span-5 space-y-6">
                <div class="bg-white p-6 rounded-2xl border border-gold/30 shadow-md flex items-start gap-4">
                    <div class="h-12 w-12 rounded-xl bg-gold/15 text-gold-dark flex items-center justify-center text-xl shrink-0">
                        <i class="fa-solid fa-headset"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-navy text-base">हेल्पलाइन एवं व्हाट्सएप</h4>
                        <p class="text-xs text-gray-500 mt-0.5">24/7 आपातकालीन सहायता व पूछताछ</p>
                        <p class="text-sm font-bold text-navy mt-2">
                            <a href="tel:9485877237" class="hover:text-gold">+91 9485877237</a>
                        </p>
                        <p class="text-xs text-gray-600 mt-1">टोल-फ्री: 1800-889-7237</p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-2xl border border-gold/30 shadow-md flex items-start gap-4">
                    <div class="h-12 w-12 rounded-xl bg-navy/10 text-navy flex items-center justify-center text-xl shrink-0">
                        <i class="fa-solid fa-location-dot"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-navy text-base">केंद्रीय मुख्यालय</h4>
                        <p class="text-xs text-gray-500 mt-0.5">विश्वास बैंक एवं विश्वास संस्था माता महारानी</p>
                        <p class="text-xs text-gray-700 mt-2 leading-relaxed">
                            विश्वास भवन, 14-16 सिविल लाइन्स, उच्च न्यायालय के समीप, जबलपुर, मध्य प्रदेश - 482001
                        </p>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-2xl border border-gold/30 shadow-md flex items-start gap-4">
                    <div class="h-12 w-12 rounded-xl bg-forest/15 text-forest flex items-center justify-center text-xl shrink-0">
                        <i class="fa-solid fa-envelope"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-navy text-base">आधिकारिक ईमेल</h4>
                        <p class="text-xs text-gray-500 mt-0.5">ग्राहकों व सदस्यों के पत्राचार हेतु</p>
                        <p class="text-xs font-semibold text-navy mt-2">
                            <a href="mailto:contact@vishwasbank.in" class="hover:underline">contact@vishwasbank.in</a>
                        </p>
                    </div>
                </div>

                <!-- Emergency Ambulance Banner -->
                <div class="p-6 bg-red-600 text-white rounded-2xl shadow-lg border-2 border-white space-y-2">
                    <span class="text-[10px] bg-white text-red-700 font-extrabold uppercase px-2 py-0.5 rounded">जीवन रक्षक सेवा</span>
                    <h4 class="text-lg font-bold">24/7 एम्बुलेंस हेल्पलाइन</h4>
                    <p class="text-xs text-red-100">आपातकालीन परिस्थिति में तत्काल एम्बुलेंस रवाना करने हेतु कॉल करें:</p>
                    <a href="tel:9485877237" class="inline-block text-xl font-extrabold text-white mt-1 underline">
                        📞 +91 9485877237
                    </a>
                </div>
            </div>

            <!-- Right Interactive Inquiry Form -->
            <div class="lg:col-span-7 bg-white rounded-3xl p-8 sm:p-10 border-2 border-gold shadow-xl">
                <span class="text-xs uppercase tracking-widest text-gold font-bold">संदेश भेजें</span>
                <h3 class="text-2xl font-bold text-navy font-heading mt-1 mb-6">ऑनलाइन पूछताछ प्रपत्र</h3>

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

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1">आपका नाम *</label>
                            <input type="text" name="name" required placeholder="पूरा नाम दर्ज करें" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-medium focus:ring-2 focus:ring-gold">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1">मोबाइल नंबर *</label>
                            <input type="tel" name="phone" required placeholder="10 अंकों का मोबाइल नंबर" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-medium focus:ring-2 focus:ring-gold">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">ईमेल (वैकल्पिक)</label>
                        <input type="email" name="email" placeholder="email@example.com" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-medium focus:ring-2 focus:ring-gold">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">विषय (Subject) *</label>
                        <select name="subject" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-medium focus:ring-2 focus:ring-gold bg-white">
                            <option value="बचत खाता पूछताछ">बचत खाता संबंधी पूछताछ</option>
                            <option value="सावधि जमा (FD) पूछताछ">सावधि जमा (FD) योजना</option>
                            <option value="स्वर्ण ऋण / व्यक्तिगत ऋण">ऋण (Loan) आवेदन पूछताछ</option>
                            <option value="वार्षिक निःशुल्क तीर्थयात्रा">वार्षिक निःशुल्क तीर्थयात्रा</option>
                            <option value="मॉडल कॉलोनी / समाज कल्याण">मॉडल कॉलोनी / समाज कल्याण</option>
                            <option value="अन्य सामान्य पूछताछ">अन्य सामान्य विषय</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">आपका संदेश / विवरण *</label>
                        <textarea name="message" required rows="4" placeholder="कृपया अपनी आवश्यकता या प्रश्न का संक्षिप्त विवरण लिखें..." class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm font-medium focus:ring-2 focus:ring-gold"></textarea>
                    </div>

                    <button type="submit" class="w-full py-3 bg-navy hover:bg-royal text-white font-bold rounded-xl shadow transition text-sm flex items-center justify-center gap-2 border border-gold/40">
                        <i class="fa-solid fa-paper-plane text-gold"></i> संदेश प्रेषित करें
                    </button>
                </form>
            </div>

        </div>
    </div>
</div>
@endsection