@extends('layouts.app')
@section('title','Add Money')

@push('styles')
    {{-- Same font + blob animation setup --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: "Hind Siliguri", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        @keyframes blobFloat {
            0%   { transform: translate3d(-10%, -10%, 0) scale(1); }
            50%  { transform: translate3d(15%, 10%, 0) scale(1.08); }
            100% { transform: translate3d(40%, -5%, 0) scale(1); }
        }

        @keyframes blobFloat2 {
            0%   { transform: translate3d(40%, 20%, 0) scale(1); }
            50%  { transform: translate3d(5%, 0, 0) scale(1.04); }
            100% { transform: translate3d(-20%, 10, 0) scale(1); }
        }
    </style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 flex justify-center items-start px-3 sm:px-4 py-8 relative overflow-hidden">

    {{-- animated blobs --}}
    <svg class="pointer-events-none absolute -top-32 -left-32 w-80 h-80 text-emerald-500/20"
         viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
         style="animation: blobFloat 18s ease-in-out infinite alternate;">
        <path fill="currentColor"
              d="M45.1,-62C58.8,-54.8,69.1,-39.4,73.4,-22.5C77.7,-5.7,75.9,12.7,67.4,26.8C58.8,40.9,43.4,50.7,27.2,58.2C11,65.7,-6,70.9,-20.4,66.3C-34.7,61.6,-46.4,47.1,-55.3,31.5C-64.3,15.9,-70.4,-0.7,-68.1,-16.7C-65.8,-32.7,-55.1,-48.1,-41.2,-55.6C-27.3,-63.1,-10.1,-62.6,5.7,-69C21.5,-75.3,43,-88.4,45.1,-62Z"/>
    </svg>

    <svg class="pointer-events-none absolute bottom-0 -right-24 w-72 h-72 text-cyan-400/10"
         viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
         style="animation: blobFloat2 22s ease-in-out infinite alternate;">
        <path fill="currentColor"
              d="M35.8,-54.7C46.3,-47.4,54,-38,60.9,-27.1C67.7,-16.2,73.7,-4.1,71.9,6.8C70.1,17.7,60.5,27.3,50.4,36.6C40.4,46,29.9,55.3,17.3,60.4C4.6,65.6,-10.1,66.6,-24.4,62.4C-38.7,58.3,-52.6,49.1,-59.8,36.3C-66.9,23.4,-67.3,7,-64.6,-8.3C-61.9,-23.6,-56.1,-37.9,-45.7,-45.9C-35.2,-53.9,-20.1,-55.7,-5.2,-49.9C9.7,-44,19.3,-30.5,35.8,-54.7Z"/>
    </svg>

    <div class="w-full max-w-xl relative z-10 pb-20">

        {{-- top nav + All Statement btn --}}
        <div class="mb-4 flex items-center justify-between text-xs text-slate-300">
            <button type="button"
                    onclick="window.history.back()"
                    class="inline-flex items-center gap-1 text-slate-300 hover:text-emerald-400 transition">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M15.75 4.75 9.5 11l6.25 6.25-1.5 1.5L6.5 11l7.75-7.75 1.5 1.5Z"/>
                </svg>
                Back
            </button>

            <div class="flex items-center gap-2">
               
                <span class="tracking-[0.18em] uppercase text-emerald-400 font-semibold text-[11px]">
                    Add Money
                </span>
            </div>
        </div>

        {{-- main glass card --}}
        <div class="rounded-3xl bg-slate-900/80 border border-emerald-500/25 shadow-[0_25px_70px_-35px_rgba(16,185,129,0.7)] backdrop-blur-sm p-5 sm:p-6">

            {{-- header --}}
            <div class="mb-4 flex items-center gap-3">
                <div class="h-11 w-11 rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-500 flex items-center justify-center text-slate-950 shadow-lg shadow-emerald-500/40">
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 3a9 9 0 1 0 9 9A9.01 9.01 0 0 0 12 3Zm1 13h-2v-2H9v-2h2V8h2v4h2v2h-2Z"/>
                    </svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-semibold text-slate-50">
                        Add Money Options
                    </div>
                    <p class="text-[11px] text-slate-400 mt-0.5">
                        আপনার পছন্দের মেথড সিলেক্ট করে ওয়ালেটে ব্যালেন্স যোগ করুন।
                    </p>
                </div>
            </div>

            {{-- cards grid --}}
            <div class="space-y-3">

                {{-- Mobile Banking --}}
                <article class="rounded-2xl border border-slate-800 bg-slate-950/70 p-4 flex items-center justify-between gap-3
                                hover:border-emerald-500/50 hover:shadow-[0_20px_60px_-30px_rgba(16,185,129,0.9)] transition">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="h-11 w-11 flex items-center justify-center rounded-2xl bg-cyan-500/15 text-cyan-300 ring-1 ring-cyan-400/40">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M7 4.5A2.5 2.5 0 0 1 9.5 2h5A2.5 2.5 0 0 1 17 4.5v15A2.5 2.5 0 0 1 14.5 22h-5A2.5 2.5 0 0 1 7 19.5v-15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <path d="M14.5 6.5c1.657 0 3 1.343 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <circle cx="12" cy="18" r="1" fill="currentColor"/>
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-slate-50 truncate">
                                Mobile Banking Add Money
                            </div>
                            <p class="text-[11px] text-slate-400 truncate">
                                bKash, Nagad, Rocket ইত্যাদি থেকে ইনস্ট্যান্ট অ্যাড মানি।
                            </p>
                        </div>
                    </div>
                    <a class="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-cyan-500 to-emerald-400 px-3 py-1.5 text-[11px] font-semibold text-slate-950
                              shadow-[0_12px_32px_-20px_rgba(34,211,238,0.9)] hover:from-cyan-400 hover:to-emerald-300 transition"
                       href="{{ url('/add-money') }}">
                        Continue
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                </article>

                {{-- Bank Transfer --}}
                <article class="rounded-2xl border border-slate-800 bg-slate-950/70 p-4 flex items-center justify-between gap-3
                                hover:border-emerald-500/50 hover:shadow-[0_20px_60px_-30px_rgba(16,185,129,0.9)] transition">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="h-11 w-11 flex items-center justify-center rounded-2xl bg-emerald-500/15 text-emerald-300 ring-1 ring-emerald-400/40">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M3 10l9-6 9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4 10h16v9H4z" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M9 14v3M12 14v3M15 14v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-slate-50 truncate">
                                Bank Transfer Add Money
                            </div>
                            <p class="text-[11px] text-slate-400 truncate">
                                ব্যাংক একাউন্ট থেকে সেফলি ব্যালেন্স যোগ করুন।
                            </p>
                        </div>
                    </div>
                    <a class="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-emerald-500 to-cyan-500 px-3 py-1.5 text-[11px] font-semibold text-slate-950
                              shadow-[0_12px_32px_-20px_rgba(16,185,129,0.9)] hover:from-emerald-400 hover:to-cyan-400 transition"
                       href="{{ url('/add-money-bank/methods') }}">
                        Continue
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                </article>

                {{-- Card Add Money --}}
                <article class="rounded-2xl border border-slate-800 bg-slate-950/70 p-4 flex items-center justify-between gap-3
                                hover:border-emerald-500/50 hover:shadow-[0_20px_60px_-30px_rgba(16,185,129,0.9)] transition">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="h-11 w-11 flex items-center justify-center rounded-2xl bg-indigo-500/15 text-indigo-300 ring-1 ring-indigo-400/40">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <rect x="3" y="5" width="18" height="14" rx="2.5"
                                      stroke="currentColor"
                                      stroke-width="1.7"
                                      stroke-linecap="round"
                                      stroke-linejoin="round" />
                                <path d="M3 9h18"
                                      stroke="currentColor"
                                      stroke-width="1.5"
                                      stroke-linecap="round"
                                      stroke-linejoin="round" />
                                <rect x="6.5" y="12.5" width="4" height="2.5" rx="0.8"
                                      stroke="currentColor"
                                      stroke-width="1.4" />
                                <path d="M15.5 12v4M13.5 14h4"
                                      stroke="currentColor"
                                      stroke-width="1.6"
                                      stroke-linecap="round"
                                      stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-slate-50 truncate">
                                Card Add Money
                            </div>
                            <p class="text-[11px] text-slate-400 truncate">
                                ডেবিট/ক্রেডিট কার্ডের মাধ্যমে ইনস্ট্যান্ট অ্যাড মানি।
                            </p>
                        </div>
                    </div>
                    <a class="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-indigo-500 to-sky-500 px-3 py-1.5 text-[11px] font-semibold text-slate-950
                              shadow-[0_12px_32px_-20px_rgba(79,70,229,0.9)] hover:from-indigo-400 hover:to-sky-400 transition"
                       href="{{ url('/add-money/cards') }}">
                        Continue
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12h14M13 5l7 7-7 7"
                                  stroke="currentColor"
                                  stroke-width="2"
                                  stroke-linecap="round"
                                  stroke-linejoin="round"/>
                        </svg>
                    </a>
                </article>

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