@extends('layouts.public')

@section('title', 'ऋण योजनाएं (Loan Schemes) | 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">समस्त ऋण योजनाएं (Loan Schemes)</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-8">
        <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>
                    <span class="text-xs font-bold text-forest bg-green-50 px-2 py-0.5 rounded">ब्याज: {{ $lt->annual_interest_rate }}% से</span>
                    <h3 class="text-xl font-bold text-navy mt-2">{{ $lt->name }}</h3>
                    <p class="text-xs text-gray-600 mt-2 line-clamp-3">{{ $lt->description }}</p>
                    <div class="mt-4 pt-3 border-t border-gray-100 text-xs space-y-1">
                        <p>ऋण सीमा: <strong>₹{{ number_format($lt->min_amount) }} - ₹{{ number_format($lt->max_amount) }}</strong></p>
                        <p>अवधि: <strong>{{ $lt->min_tenure_months }} - {{ $lt->max_tenure_months }} माह</strong></p>
                    </div>
                </div>
                <div class="mt-6 pt-4 border-t border-gray-100">
                    <a href="{{ route('loan.detail', $lt->slug) }}" class="block w-full py-2 bg-navy text-white text-center text-xs font-bold rounded-lg hover:bg-royal">
                        विस्तार से जानें
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection