@extends('layouts.public')

@section('title', 'ऋण सेवाएं (Loan Services) | 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">विश्वास बैंक ऋण योजनाएं</h1>
        <p class="text-gray-300 text-sm sm:text-base mt-2 max-w-2xl">
            स्वर्ण ऋण मात्र 8.50% से शुरू, व्यापार, व्यक्तिगत एवं शिक्षा ऋण न्यूनतम औपचारिकताओं और त्वरित स्वीकृति के साथ।
        </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-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($loanTypes as $lt)
            <div class="bg-white rounded-2xl p-6 border border-gold/30 shadow card-hover flex flex-col justify-between">
                <div>
                    <div class="h-12 w-12 rounded-xl bg-gold/15 text-gold-dark flex items-center justify-center text-xl mb-4">
                        <i class="fa-solid fa-hand-holding-dollar"></i>
                    </div>
                    <span class="text-xs font-bold text-navy bg-gold/20 px-2 py-0.5 rounded">
                        {{ $lt->annual_interest_rate }}% वार्षिक दर
                    </span>
                    <h3 class="text-xl font-bold text-navy mt-3">{{ $lt->name }}</h3>
                    <p class="text-gray-600 text-xs mt-2 leading-relaxed">
                        {{ $lt->description }}
                    </p>
                    <div class="mt-4 pt-3 border-t border-gray-100 text-xs text-gray-500 space-y-1">
                        <p>अधिकतम अवधि: <strong class="text-navy">{{ $lt->max_tenure_months }} माह</strong></p>
                        <p>प्रोसेसिंग शुल्क: <strong class="text-navy">{{ $lt->processing_fee_percent }}%</strong></p>
                    </div>
                </div>

                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
                    <a href="{{ route('loan.detail', $lt->slug) }}" class="text-xs font-bold text-navy hover:text-gold">विस्तृत विवरण →</a>
                    <a href="{{ route('customer.loans.apply', ['type' => $lt->slug]) }}" class="text-xs font-bold bg-navy text-white px-3 py-1.5 rounded-lg hover:bg-royal">आवेदन करें</a>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Quick EMI Calculator Card -->
        <div class="bg-white rounded-3xl p-8 border border-gold/40 shadow-lg flex flex-col md:flex-row items-center justify-between gap-6">
            <div class="space-y-2 text-center md:text-left">
                <h3 class="text-2xl font-bold text-navy">अपनी मासिक ऋण किस्त की जांच करें</h3>
                <p class="text-xs sm:text-sm text-gray-600">हमारे इंटरैक्टिव ईएमआई कैलकुलेटर की सहायता से अपनी सुविधा अनुसार अवधि और राशि चुनें।</p>
            </div>
            <a href="{{ route('calculator.emi') }}" class="px-6 py-3 bg-gold hover:bg-gold-dark text-navy font-bold rounded-xl shadow transition text-sm whitespace-nowrap">
                <i class="fa-solid fa-calculator mr-1"></i> ईएमआई कैलकुलेटर खोलें
            </a>
        </div>
    </div>
</div>
@endsection