@extends('layouts.public')

@section('title', 'शाखा लोकेटर (Branch Network) | 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">हमारी शाखाएं (Branch Network)</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 space-y-10">
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($branches as $b)
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-gold/40 shadow-lg flex flex-col justify-between">
                <div>
                    <div class="flex items-center justify-between pb-3 border-b border-gray-100">
                        <span class="text-xs font-bold text-navy bg-gold/20 px-2.5 py-0.5 rounded">शाखा कोड: {{ $b->branch_code }}</span>
                        <span class="text-xs text-forest font-semibold"><i class="fa-solid fa-circle text-[8px] text-green-500 mr-1"></i> सक्रिय</span>
                    </div>

                    <h3 class="text-xl font-bold text-navy font-heading mt-3">{{ $b->name }}</h3>
                    <p class="text-xs text-gold-dark font-semibold mt-1">IFSC Code: {{ $b->ifsc_code }}</p>

                    <div class="mt-4 space-y-2 text-xs text-gray-600">
                        <p class="flex items-start gap-2">
                            <i class="fa-solid fa-location-dot text-gold text-sm mt-0.5"></i>
                            <span>{{ $b->address_line }}, {{ $b->city }}, {{ $b->district }}, {{ $b->state }} - {{ $b->pincode }}</span>
                        </p>
                        <p class="flex items-center gap-2">
                            <i class="fa-solid fa-phone text-gold text-sm"></i>
                            <a href="tel:{{ $b->phone }}" class="text-navy font-bold hover:underline">{{ $b->phone }}</a>
                        </p>
                        <p class="flex items-center gap-2">
                            <i class="fa-solid fa-envelope text-gold text-sm"></i>
                            <span>{{ $b->email }}</span>
                        </p>
                        <p class="flex items-center gap-2 text-gray-500">
                            <i class="fa-solid fa-clock text-gold text-sm"></i>
                            <span>{{ $b->operating_hours }}</span>
                        </p>
                    </div>
                </div>

                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
                    <a href="https://maps.google.com/?q={{ urlencode($b->name . ' ' . $b->city) }}" target="_blank" class="text-xs font-bold text-navy hover:text-gold flex items-center gap-1">
                        <i class="fa-solid fa-map-location-dot text-gold"></i> मैप पर दिशा देखें
                    </a>
                    <a href="tel:{{ $b->phone }}" class="text-xs font-bold bg-navy text-white px-3 py-1.5 rounded-lg hover:bg-royal">
                        कॉल करें
                    </a>
                </div>
            </div>
            @endforeach
        </div>

        <div class="bg-navy text-white p-8 rounded-3xl border-2 border-gold text-center space-y-3">
            <h3 class="text-2xl font-bold font-heading">क्या आपकी निकटवर्ती ग्राम पंचायत में बैंक शाखा नहीं है?</h3>
            <p class="text-xs sm:text-sm text-gray-300 max-w-xl mx-auto">
                चिंता न करें! हमारे प्रमाणित मोबाइल फील्ड कलेक्शन एजेंट आपकी चौखट पर आकर खाता खोलने व नकदी जमा की सुविधा प्रदान करते हैं।
            </p>
            <div class="pt-2">
                <a href="tel:9485877237" class="inline-flex items-center gap-2 px-6 py-2.5 bg-gold text-navy font-bold rounded-lg text-xs uppercase hover:bg-gold-dark transition">
                    <i class="fa-solid fa-phone"></i> डोरस्टेप सेवा हेतु कॉल करें: +91 9485877237
                </a>
            </div>
        </div>

    </div>
</div>
@endsection