@extends('frontend.master')
@section('content')
<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
<style>
  .swiper { width: 100%; max-width: 100%; }
  .swiper-slide img { width: 100%; height: auto; display: block; }
  /* চাইলে নির্দিষ্ট অনুপাত চান:
  .mySwiper { aspect-ratio: 16 / 6; }
  .mySwiper .swiper-slide { height: 100%; }
  .mySwiper img { height: 100%; object-fit: cover; }
  */
</style>
    <!-- Top Message + CTA -->
    <section class="text-center my-10" data-aos="fade-down" data-aos-delay="200">
        <p class="text-xl text-gray-800 font-semibold">আপনার অর্থিক প্রয়োজনের জন্য আমরা রয়েছি</p>
        <a href="{{ url('/loan/apply') }}" class="mt-6 bg-green-600 text-white font-bold text-xl px-8 py-2 rounded-full shadow-2xl 
              inline-flex items-center gap-2 mx-auto block
              hover:bg-green-700 transition duration-300 transform hover:scale-105 float-animation">
            <i class="ri-hand-coin-line text-3xl"></i>
            লোন আবেদন করুন
        </a>

    </section>

    <!-- Quick Actions Grid with hover + AOS animation -->
    <section class="grid grid-cols-4 gap-7 text-center mb-10">
        <a href="{{ url('/loan/apply') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="0">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-shield-check-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">লোন আবেদন</p>
        </div>
        </a>

         <a href="{{ url('/withdraw') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="100">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-money-dollar-circle-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">ক্যাশ আউট</p>
        </div>
        </a>

        <a href="{{ url('/loan/installments') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="200">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-calendar-check-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">জমা দিন</p>
        </div>
        </a>



        <a href="{{ url('/profile') }}">
            <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="300">
                <div
                    class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                    <i class="ri-user-3-line text-red-600 text-4xl"></i>
                </div>
                <p class="mt-3 text-xs font-medium">প্রোফাইল</p>
            </div>
        </a>


        <a href="{{ url('/my-loans') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="400">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-money-cny-circle-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">আমার লোন</p>
        </div>
        </a>

        <a href="{{ url('/transactions') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="500">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-file-list-3-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">লেনদেনসমূহ</p>
        </div>
        </a>

        <a href="{{ url('/contact') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="600">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-headphone-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">যোগাযোগ</p>
        </div>
        </a>

         <a href="{{ url('/about') }}">
        <div class="flex flex-col items-center" data-aos="zoom-in" data-aos-delay="700">
            <div
                class="bg-red-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg transition transform hover:scale-125 hover:shadow-2xl hover:bg-red-100">
                <i class="ri-information-line text-red-600 text-4xl"></i>
            </div>
            <p class="mt-3 text-xs font-medium">সম্পর্কে</p>
        </div>
        </a>
    </section>

     <div class="swiper mySwiper" style="display: inline-block; margin-bottom: 10px !important;">
            <div class="swiper-wrapper">
                @php
                    $banners = \App\Models\Banner::get();
                  @endphp
                @foreach ($banners as $banner)
                    <div class="swiper-slide">
                        <img style="height: 200px!important;" src="{{ asset('storage/' . $banner->image) }}" alt="banner">
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>


    <!-- Partners -->
    <section class="text-center my-12" data-aos="fade-up" data-aos-delay="200">
        <p class="text-red-600 font-bold text-xl">আপনার পার্টনার</p>
        <p class="text-gray-700 mt-2 text-lg">বিভিন্ন অর্থিক প্রতিষ্ঠান থেকে লোন নিন</p>
        <div class="flex justify-center items-center gap-12 mt-8">
            <img src="{{ asset('img/partners/city-bank.png') }}" class="h-12 drop-shadow" alt="City Bank">
            <img src="{{ asset('img/partners/brack1.jpg') }}" class="h-12 drop-shadow" alt="brack Bank">
            <img src="{{ asset('img/partners/sonaly.png') }}" class="h-12 drop-shadow" alt="sonaly Bank">
           
        </div>
        <p class="text-gray-600 mt-6 text-sm">সিটি ব্যাংকসহ বাংলাদেশের শীর্ষ ব্যাংকসমূহের ব্যক্তিগত লোন</p>
    </section>


    
    <script src="https://unpkg.com/swiper@9/swiper-bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // যদি পেজে একটাই স্লাইডার থাকে:
    const swiper = new Swiper('.mySwiper', {
      slidesPerView: 1,
      spaceBetween: 12,
      loop: true,
      autoplay: { delay: 4000, disableOnInteraction: false },
      pagination: { el: '.swiper-pagination', clickable: true },
      // চাইলে effect: 'fade',
      // navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    });
  });
</script>
@endsection