@extends('layouts.app')

@section('title', 'Donate - CHEER MEDICS FOUNDATION')

@section('content')
<!-- DONATE PAGE -->
<div id="donate" class="page pt-20">
       <section class="relative animated-bg text-white py-20 overflow-hidden">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="relative max-w-4xl mx-auto px-4 text-center">
            <span class="inline-block bg-white/20 backdrop-blur px-6 py-2 rounded-full text-sm font-bold mb-6">
                💝 Make a Difference Today
            </span>
            <h1 class="text-4xl md:text-6xl font-black mb-4">Support Our Mission</h1>
            <p class="text-xl opacity-90 max-w-2xl mx-auto">Your generous donation helps medical students and elderly communities access better healthcare</p>
        </div>
    </section>

    <section class="py-12 -mt-10 relative z-10">
        <div class="max-w-4xl mx-auto px-4">
            <!-- Progress Steps -->
            <div class="glass rounded-2xl shadow-xl p-6 mb-8">
                <div class="flex items-center justify-between">
                    <div class="progress-step active flex flex-col items-center" id="progress-1">
                        <div class="step-circle w-10 h-10 rounded-full border-3 border-gray-300 flex items-center justify-center font-bold text-gray-400 mb-2">1</div>
                        <span class="text-xs font-semibold text-gray-600 hidden sm:block">Amount</span>
                    </div>
                    <div class="progress-line flex-1 h-1 bg-gray-200 mx-2 rounded" id="line-1"></div>
                    <div class="progress-step flex flex-col items-center" id="progress-2">
                        <div class="step-circle w-10 h-10 rounded-full border-3 border-gray-300 flex items-center justify-center font-bold text-gray-400 mb-2">2</div>
                        <span class="text-xs font-semibold text-gray-600 hidden sm:block">Payment</span>
                    </div>
                    <div class="progress-line flex-1 h-1 bg-gray-200 mx-2 rounded" id="line-2"></div>
                    <div class="progress-step flex flex-col items-center" id="progress-3">
                        <div class="step-circle w-10 h-10 rounded-full border-3 border-gray-300 flex items-center justify-center font-bold text-gray-400 mb-2">3</div>
                        <span class="text-xs font-semibold text-gray-600 hidden sm:block">Details</span>
                    </div>
                    <div class="progress-line flex-1 h-1 bg-gray-200 mx-2 rounded" id="line-3"></div>
                    <div class="progress-step flex flex-col items-center" id="progress-4">
                        <div class="step-circle w-10 h-10 rounded-full border-3 border-gray-300 flex items-center justify-center font-bold text-gray-400 mb-2">4</div>
                        <span class="text-xs font-semibold text-gray-600 hidden sm:block">Confirm</span>
                    </div>
                </div>
            </div>

            <!-- Main Form Container -->
            <div class="glass rounded-3xl shadow-2xl overflow-hidden">
                <!-- Security Badge -->
                <div class="bg-gradient-to-r from-green-600 to-green-700 px-6 py-4">
                    <div class="flex items-center justify-center gap-6 flex-wrap text-white text-sm">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                            <span class="font-bold">Secure Payment</span>
                        </div>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                            <span class="font-bold">256-bit SSL Encrypted</span>
                        </div>
                    </div>
                </div>

                <form id="donationForm" class="p-8 md:p-10">
                    <!-- STEP 1: Amount Selection -->
                    <div class="step active" id="step-1">
                        <h2 class="text-3xl font-black text-gray-900 mb-2">Choose Your Donation</h2>
                        <p class="text-gray-600 mb-8">Select an amount and frequency that works for you</p>

                        <!-- Frequency Toggle -->
                        <div class="flex gap-3 mb-8">
                            <button type="button" onclick="selectFrequency('one-time', this)" class="frequency-btn selected flex-1 py-4 px-6 rounded-xl border-2 border-gray-200 font-bold transition-all">
                                One-Time
                            </button>
                            <button type="button" onclick="selectFrequency('monthly', this)" class="frequency-btn flex-1 py-4 px-6 rounded-xl border-2 border-gray-200 font-bold transition-all">
                                Monthly
                            </button>
                        </div>

                        <!-- Amount Grid -->
                        <div class="grid grid-cols-3 gap-4 mb-6">
                            <button type="button" onclick="selectAmount(25, this)" class="amount-btn p-5 border-2 border-gray-200 rounded-2xl hover:border-blue-500 transition-all font-black text-2xl">$25</button>
                            <button type="button" onclick="selectAmount(50, this)" class="amount-btn p-5 border-2 border-gray-200 rounded-2xl hover:border-blue-500 transition-all font-black text-2xl">$50</button>
                            <button type="button" onclick="selectAmount(100, this)" class="amount-btn selected p-5 border-2 border-gray-200 rounded-2xl hover:border-blue-500 transition-all font-black text-2xl">$100</button>
                            <button type="button" onclick="selectAmount(250, this)" class="amount-btn p-5 border-2 border-gray-200 rounded-2xl hover:border-blue-500 transition-all font-black text-2xl">$250</button>
                            <button type="button" onclick="selectAmount(500, this)" class="amount-btn p-5 border-2 border-gray-200 rounded-2xl hover:border-blue-500 transition-all font-black text-2xl">$500</button>
                            <button type="button" onclick="selectAmount(1000, this)" class="amount-btn p-5 border-2 border-gray-200 rounded-2xl hover:border-blue-500 transition-all font-black text-2xl">$1000</button>
                        </div>

                        <!-- Custom Amount -->
                        <div class="relative mb-8">
                            <span class="absolute left-5 top-1/2 -translate-y-1/2 text-2xl font-bold text-gray-500">$</span>
                            <input type="number" id="customAmount" min="1" placeholder="Enter custom amount" 
                                class="w-full pl-12 pr-5 py-5 border-2 border-gray-200 rounded-2xl focus:border-blue-500 focus:outline-none text-2xl font-bold"
                                oninput="handleCustomAmount(this)">
                        </div>

                        <!-- Impact Preview -->
                        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl p-6 mb-8">
                            <h4 class="font-bold text-gray-900 mb-3">💫 Your Impact</h4>
                            <p class="text-gray-700" id="impactText">Your $100 donation can provide medical supplies for 5 elderly patients for a month.</p>
                        </div>

                        <button type="button" onclick="nextStep()" class="w-full gradient-primary text-white py-5 rounded-2xl font-bold text-xl hover:shadow-xl transition-all flex items-center justify-center gap-2">
                            Continue to Payment
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                        </button>
                    </div>

                    <!-- STEP 2: Payment Method -->
                    <div class="step" id="step-2">
                        <h2 class="text-3xl font-black text-gray-900 mb-2">Select Payment Method</h2>
                        <p class="text-gray-600 mb-8">Choose how you'd like to make your donation</p>

                        <div class="space-y-4 mb-8">
                            <!-- Credit/Debit Card -->
                            <div onclick="selectPaymentMethod('card', this)" class="payment-method cursor-pointer border-2 border-gray-200 rounded-2xl p-5 transition-all hover:border-blue-300 flex items-center gap-4">
                                <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-bold text-gray-900">Credit / Debit Card</h4>
                                    <p class="text-sm text-gray-500">Visa, Mastercard, American Express</p>
                                </div>
                                <div class="check-icon hidden w-8 h-8 bg-green-500 rounded-full items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                </div>
                            </div>

                            <!-- Bank Transfer -->
                            <div onclick="selectPaymentMethod('bank', this)" class="payment-method cursor-pointer border-2 border-gray-200 rounded-2xl p-5 transition-all hover:border-blue-300 flex items-center gap-4">
                                <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-bold text-gray-900">Bank Transfer</h4>
                                    <p class="text-sm text-gray-500">Direct bank transfer (Domestic & International)</p>
                                </div>
                                <div class="check-icon hidden w-8 h-8 bg-green-500 rounded-full items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                </div>
                            </div>

                            <!-- PayPal -->
                            <div onclick="selectPaymentMethod('paypal', this)" class="payment-method cursor-pointer border-2 border-gray-200 rounded-2xl p-5 transition-all hover:border-blue-300 flex items-center gap-4">
                                <div class="w-14 h-14 bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl flex items-center justify-center">
                                    <span class="text-white font-black text-lg">P</span>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-bold text-gray-900">PayPal</h4>
                                    <p class="text-sm text-gray-500">Fast and secure PayPal checkout</p>
                                </div>
                                <div class="check-icon hidden w-8 h-8 bg-green-500 rounded-full items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                </div>
                            </div>

                            <!-- Crypto -->
                            <div onclick="selectPaymentMethod('crypto', this)" class="payment-method cursor-pointer border-2 border-gray-200 rounded-2xl p-5 transition-all hover:border-blue-300 flex items-center gap-4">
                                <div class="w-14 h-14 bg-gradient-to-br from-orange-400 to-yellow-500 rounded-xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"/></svg>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-bold text-gray-900">Cryptocurrency</h4>
                                    <p class="text-sm text-gray-500">Bitcoin, Ethereum, USDT</p>
                                </div>
                                <div class="check-icon hidden w-8 h-8 bg-green-500 rounded-full items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                </div>
                            </div>
                        </div>

                        <div class="flex gap-4">
                            <button type="button" onclick="prevStep()" class="flex-1 py-5 rounded-2xl font-bold text-xl border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all">
                                Back
                            </button>
                            <button type="button" onclick="nextStep()" class="flex-1 gradient-primary text-white py-5 rounded-2xl font-bold text-xl hover:shadow-xl transition-all">
                                Continue
                            </button>
                        </div>
                    </div>

                    <!-- STEP 3: Payment Details -->
                    <div class="step" id="step-3">
                        <h2 class="text-3xl font-black text-gray-900 mb-2">Payment Details</h2>
                        <p class="text-gray-600 mb-8" id="paymentDetailsSubtitle">Enter your payment information</p>

                        <!-- Card Payment Fields -->
                        <div id="cardFields" class="hidden space-y-5 mb-8">
                            <div>
                                <label class="block text-gray-700 font-bold mb-2">Card Number</label>
                                <input type="text" placeholder="1234 5678 9012 3456" maxlength="19" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold" oninput="formatCardNumber(this)">
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-gray-700 font-bold mb-2">Expiry Date</label>
                                    <input type="text" placeholder="MM/YY" maxlength="5" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold" oninput="formatExpiry(this)">
                                </div>
                                <div>
                                    <label class="block text-gray-700 font-bold mb-2">CVV</label>
                                    <input type="text" placeholder="123" maxlength="4" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold">
                                </div>
                            </div>
                            <div>
                                <label class="block text-gray-700 font-bold mb-2">Cardholder Name</label>
                                <input type="text" placeholder="John Doe" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold">
                            </div>
                        </div>

                        <!-- Bank Transfer Fields -->
                        <div id="bankFields" class="hidden mb-8">
                            <!-- Bank Type Tabs -->
                            <div class="flex gap-2 mb-6">
                                <button type="button" onclick="selectBankType('domestic', this)" class="bank-tab active flex-1 py-4 px-6 rounded-xl border-2 border-gray-200 font-bold transition-all">
                                    🏦 Domestic
                                </button>
                                <button type="button" onclick="selectBankType('international', this)" class="bank-tab flex-1 py-4 px-6 rounded-xl border-2 border-gray-200 font-bold transition-all">
                                    🌍 International
                                </button>
                            </div>

                            <!-- Domestic Bank Details -->
                            <div id="domesticBank" class="space-y-4">
                                <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6">
                                    <h4 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                                        <span class="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center text-white text-sm">$</span>
                                        USD Account
                                    </h4>
                                    <div class="space-y-3">
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Bank Name</span>
                                            <span class="font-bold text-gray-900">Chase Bank</span>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Account Name</span>
                                            <span class="font-bold text-gray-900">CHEER MEDICS FOUNDATION</span>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Account Number</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold text-gray-900" id="domesticAccNum">1234567890</span>
                                                <button type="button" onclick="copyToClipboard('1234567890')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all">
                                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Routing Number</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold text-gray-900">021000021</span>
                                                <button type="button" onclick="copyToClipboard('021000021')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all">
                                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Account Type</span>
                                            <span class="font-bold text-gray-900">Checking</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- International Bank Details -->
                            <div id="internationalBank" class="hidden space-y-4">
                                <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6">
                                    <h4 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                                        <span class="w-8 h-8 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center text-white text-sm">€</span>
                                        EUR Account (SEPA)
                                    </h4>
                                    <div class="space-y-3">
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Bank Name</span>
                                            <span class="font-bold text-gray-900">Deutsche Bank</span>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Account Name</span>
                                            <span class="font-bold text-gray-900">CHEER MEDICS FOUNDATION</span>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">IBAN</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold text-gray-900 text-sm">DE89370400440532013000</span>
                                                <button type="button" onclick="copyToClipboard('DE89370400440532013000')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all">
                                                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">BIC/SWIFT</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold text-gray-900">DEUTDEDB</span>
                                                <button type="button" onclick="copyToClipboard('DEUTDEDB')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all">
                                                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-6">
                                    <h4 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                                        <span class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center text-white text-sm">£</span>
                                        GBP Account
                                    </h4>
                                    <div class="space-y-3">
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Bank Name</span>
                                            <span class="font-bold text-gray-900">Barclays Bank</span>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Account Name</span>
                                            <span class="font-bold text-gray-900">CHEER MEDICS FOUNDATION</span>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Account Number</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold text-gray-900">12345678</span>
                                                <button type="button" onclick="copyToClipboard('12345678')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all">
                                                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center p-3 bg-white rounded-xl">
                                            <span class="text-gray-600 font-medium">Sort Code</span>
                                            <div class="flex items-center gap-2">
                                                <span class="font-bold text-gray-900">20-00-00</span>
                                                <button type="button" onclick="copyToClipboard('20-00-00')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all">
                                                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-xl">
                                <p class="text-yellow-800 text-sm font-medium">⚠️ Please use your email as the payment reference so we can match your donation.</p>
                            </div>
                        </div>

                        <!-- PayPal Fields -->
                        <div id="paypalFields" class="hidden mb-8">
                            <div class="text-center py-10">
                                <div class="w-20 h-20 bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl flex items-center justify-center mx-auto mb-6">
                                    <span class="text-white font-black text-3xl">P</span>
                                </div>
                                <h3 class="text-2xl font-bold text-gray-900 mb-3">Pay with PayPal</h3>
                                <p class="text-gray-600 mb-6">You'll be redirected to PayPal to complete your donation securely.</p>
                                <button type="button" class="bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold py-4 px-10 rounded-xl transition-all">
                                    Continue to PayPal
                                </button>
                            </div>
                        </div>

                        <!-- Crypto Fields -->
                        <div id="cryptoFields" class="hidden mb-8">
                            <div class="space-y-4">
                                <div class="bg-gradient-to-br from-orange-50 to-yellow-50 rounded-2xl p-6">
                                    <h4 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                                        <span class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center text-white text-sm">₿</span>
                                        Bitcoin (BTC)
                                    </h4>
                                    <div class="p-4 bg-white rounded-xl">
                                        <p class="text-xs text-gray-500 mb-2">Wallet Address</p>
                                        <div class="flex items-center gap-2">
                                            <code class="text-sm font-mono text-gray-900 break-all">bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh</code>
                                            <button type="button" onclick="copyToClipboard('bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all flex-shrink-0">
                                                <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl p-6">
                                    <h4 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                                        <span class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center text-white text-sm">Ξ</span>
                                        Ethereum (ETH)
                                    </h4>
                                    <div class="p-4 bg-white rounded-xl">
                                        <p class="text-xs text-gray-500 mb-2">Wallet Address</p>
                                        <div class="flex items-center gap-2">
                                            <code class="text-sm font-mono text-gray-900 break-all">0x742d35Cc6634C0532925a3b844Bc9e7595f...</code>
                                            <button type="button" onclick="copyToClipboard('0x742d35Cc6634C0532925a3b844Bc9e7595f')" class="copy-btn p-2 hover:bg-gray-100 rounded-lg transition-all flex-shrink-0">
                                                <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex gap-4">
                            <button type="button" onclick="prevStep()" class="flex-1 py-5 rounded-2xl font-bold text-xl border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all">Back</button>
                            <button type="button" onclick="nextStep()" class="flex-1 gradient-primary text-white py-5 rounded-2xl font-bold text-xl hover:shadow-xl transition-all">Continue</button>
                        </div>
                    </div>

                    <!-- STEP 4: Confirmation -->
                    <div class="step" id="step-4">
                        <h2 class="text-3xl font-black text-gray-900 mb-2">Your Information</h2>
                        <p class="text-gray-600 mb-8">Almost done! Please provide your details</p>

                        <div class="space-y-5 mb-8">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-gray-700 font-bold mb-2">First Name *</label>
                                    <input type="text" required placeholder="John" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold">
                                </div>
                                <div>
                                    <label class="block text-gray-700 font-bold mb-2">Last Name *</label>
                                    <input type="text" required placeholder="Doe" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold">
                                </div>
                            </div>
                            <div>
                                <label class="block text-gray-700 font-bold mb-2">Email Address *</label>
                                <input type="email" required placeholder="john@example.com" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-bold mb-2">Phone (Optional)</label>
                                <input type="tel" placeholder="+1 (555) 123-4567" class="w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none font-semibold">
                            </div>
                        </div>

                        <!-- Donation Summary -->
                        <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 mb-6">
                            <h4 class="font-black text-gray-900 mb-4">📋 Donation Summary</h4>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Amount</span>
                                    <span class="font-bold text-gray-900" id="summaryAmount">$100.00</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Frequency</span>
                                    <span class="font-bold text-gray-900" id="summaryFrequency">One-Time</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Payment Method</span>
                                    <span class="font-bold text-gray-900" id="summaryMethod">Credit Card</span>
                                </div>
                                <hr class="border-gray-200">
                                <div class="flex justify-between text-lg">
                                    <span class="font-bold text-gray-900">Total</span>
                                    <span class="font-black text-blue-600" id="summaryTotal">$100.00</span>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-4 mb-8">
                            <label class="flex items-start cursor-pointer">
                                <input type="checkbox" class="mt-1 mr-3 w-5 h-5 text-blue-600 rounded">
                                <span class="text-gray-700 text-sm">Cover transaction fees so 100% goes to programs (+$3.00)</span>
                            </label>
                            <label class="flex items-start cursor-pointer">
                                <input type="checkbox" checked class="mt-1 mr-3 w-5 h-5 text-blue-600 rounded">
                                <span class="text-gray-700 text-sm">Send me updates about CHEERMED's impact</span>
                            </label>
                            <label class="flex items-start cursor-pointer">
                                <input type="checkbox" required class="mt-1 mr-3 w-5 h-5 text-blue-600 rounded">
                                <span class="text-gray-700 text-sm">I agree to the Terms & Conditions and Privacy Policy *</span>
                            </label>
                        </div>

                        <div class="flex gap-4">
                            <button type="button" onclick="prevStep()" class="flex-1 py-5 rounded-2xl font-bold text-xl border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all">Back</button>
                            <button type="submit" onclick="completeDonation(event)" class="flex-1 gradient-primary text-white py-5 rounded-2xl font-bold text-xl hover:shadow-xl transition-all flex items-center justify-center gap-2">
                                Complete Donation
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                            </button>
                        </div>

                        <div class="mt-6 text-center">
                            <p class="text-gray-500 text-sm">🎯 <strong>Tax Deductible:</strong> CHEERMED is a registered nonprofit.</p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    </div>
@endsection

@push('scripts')
<script>
let currentStep = 1;
let selectedAmount = 50;
let frequency = 'one-time';
let paymentMethod = 'card';

function selectAmount(amount) {
    selectedAmount = amount;
    document.querySelectorAll('.amount-btn').forEach(btn => {
        btn.classList.remove('border-cyan-500', 'bg-cyan-50', 'text-cyan-700');
        btn.classList.add('border-gray-200');
    });
    event.target.classList.add('border-cyan-500', 'bg-cyan-50', 'text-cyan-700');
    event.target.classList.remove('border-gray-200');
    document.getElementById('custom-amount').value = '';
}

function setFrequency(freq) {
    frequency = freq;
    document.querySelectorAll('.frequency-btn').forEach(btn => {
        btn.classList.remove('border-cyan-500', 'bg-cyan-50', 'text-cyan-700');
        btn.classList.add('border-gray-200', 'text-gray-700');
    });
    event.target.classList.add('border-cyan-500', 'bg-cyan-50', 'text-cyan-700');
    event.target.classList.remove('border-gray-200', 'text-gray-700');
}

function selectPayment(method) {
    paymentMethod = method;
    document.querySelectorAll('.payment-btn').forEach(btn => {
        btn.classList.remove('border-cyan-500', 'bg-cyan-50', 'active');
        btn.classList.add('border-gray-200');
    });
    event.target.closest('.payment-btn').classList.add('border-cyan-500', 'bg-cyan-50', 'active');
    event.target.closest('.payment-btn').classList.remove('border-gray-200');
}

function nextStep(step) {
    const customAmount = document.getElementById('custom-amount').value;
    if (customAmount) selectedAmount = parseFloat(customAmount);
    
    document.getElementById('step-' + currentStep).classList.add('hidden');
    document.getElementById('step-' + step).classList.remove('hidden');
    currentStep = step;
    
    if (step === 3) {
        document.getElementById('card-form').classList.add('hidden');
        document.getElementById('bank-form').classList.add('hidden');
        document.getElementById('paypal-form').classList.add('hidden');
        document.getElementById('crypto-form').classList.add('hidden');
        document.getElementById(paymentMethod + '-form').classList.remove('hidden');
    }
    
    if (step === 4) {
        document.getElementById('confirm-amount').textContent = '$' + selectedAmount.toFixed(2);
        document.getElementById('confirm-frequency').textContent = frequency === 'one-time' ? 'One-Time' : 'Monthly';
        document.getElementById('confirm-payment').textContent = paymentMethod.charAt(0).toUpperCase() + paymentMethod.slice(1);
        document.getElementById('confirm-total').textContent = '$' + selectedAmount.toFixed(2);
    }
}

function prevStep(step) {
    document.getElementById('step-' + currentStep).classList.add('hidden');
    document.getElementById('step-' + step).classList.remove('hidden');
    currentStep = step;
}

function completeDonation() {
    alert('Thank you for your generous donation of $' + selectedAmount.toFixed(2) + '! You will receive a confirmation email shortly.');
}
</script>
<script>
     
        // Hero Slider
        let currentSlide = 0;
        const slides = document.querySelectorAll('.hero-slide');
        const slideBtns = document.querySelectorAll('.slide-btn');
        const progressBar = document.querySelector('.slide-progress');
        let slideInterval;

        function showSlide(index) {
            slides.forEach((s, i) => {
                s.classList.remove('active');
                slideBtns[i]?.classList.remove('bg-white');
                slideBtns[i]?.classList.add('bg-white/50');
            });
            slides[index].classList.add('active');
            slideBtns[index]?.classList.add('bg-white');
            slideBtns[index]?.classList.remove('bg-white/50');
            
            // Reset progress
            progressBar.classList.remove('active');
            void progressBar.offsetWidth;
            progressBar.classList.add('active');
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
            resetInterval();
        }

        function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            showSlide(currentSlide);
            resetInterval();
        }

        function goToSlide(index) {
            currentSlide = index;
            showSlide(currentSlide);
            resetInterval();
        }

        function resetInterval() {
            clearInterval(slideInterval);
            slideInterval = setInterval(nextSlide, 6000);
        }

        // Start slider
        showSlide(0);
        slideInterval = setInterval(nextSlide, 6000);

        // Navbar scroll effect
        window.addEventListener('scroll', () => {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('nav-scrolled');
            } else {
                navbar.classList.remove('nav-scrolled');
            }
        });

        // Scroll reveal
        function reveal() {
            document.querySelectorAll('.reveal').forEach(el => {
                const windowHeight = window.innerHeight;
                const elementTop = el.getBoundingClientRect().top;
                if (elementTop < windowHeight - 100) {
                    el.classList.add('active');
                }
            });
        }
        window.addEventListener('scroll', reveal);
        reveal();
         // Page Navigation
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Mobile Menu Toggle
        function toggleMobileMenu() {
            document.getElementById('mobile-menu').classList.toggle('active');
        }
        
        // Mobile Dropdown Toggle
        function toggleMobileDropdown(id, button) {
            const dropdown = document.getElementById(id);
            const svg = button.querySelector('svg');
            dropdown.classList.toggle('active');
            button.classList.toggle('active');
        }

         document.addEventListener('DOMContentLoaded', function() {
            createParticles();
            initCarousel();
            reveal();
        });
         let currentStep = 1;
        let selectedAmount = 100;
        let selectedFrequency = 'one-time';
        let selectedPaymentMethod = null;

        function nextStep() {
            if (currentStep === 2 && !selectedPaymentMethod) {
                alert('Please select a payment method');
                return;
            }
            if (currentStep < 4) {
                document.getElementById(`step-${currentStep}`).classList.remove('active');
                currentStep++;
                document.getElementById(`step-${currentStep}`).classList.add('active');
                updateProgress();
                updateSummary();
            }
        }

        function prevStep() {
            if (currentStep > 1) {
                document.getElementById(`step-${currentStep}`).classList.remove('active');
                currentStep--;
                document.getElementById(`step-${currentStep}`).classList.add('active');
                updateProgress();
            }
        }

        function updateProgress() {
            for (let i = 1; i <= 4; i++) {
                const step = document.getElementById(`progress-${i}`);
                const line = document.getElementById(`line-${i}`);
                step.classList.remove('active', 'completed');
                if (line) line.classList.remove('completed');
                
                if (i < currentStep) {
                    step.classList.add('completed');
                    if (line) line.classList.add('completed');
                } else if (i === currentStep) {
                    step.classList.add('active');
                }
            }
        }

        function selectAmount(amount, btn) {
            selectedAmount = amount;
            document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
            document.getElementById('customAmount').value = '';
            updateImpactText();
        }

        function handleCustomAmount(input) {
            if (input.value) {
                selectedAmount = parseFloat(input.value);
                document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('selected'));
                updateImpactText();
            }
        }

        function selectFrequency(freq, btn) {
            selectedFrequency = freq;
            document.querySelectorAll('.frequency-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        }

        function selectPaymentMethod(method, el) {
            selectedPaymentMethod = method;
            document.querySelectorAll('.payment-method').forEach(p => p.classList.remove('selected'));
            el.classList.add('selected');
            
            // Hide all payment fields
            document.getElementById('cardFields').classList.add('hidden');
            document.getElementById('bankFields').classList.add('hidden');
            document.getElementById('paypalFields').classList.add('hidden');
            document.getElementById('cryptoFields').classList.add('hidden');
        }

        function showPaymentFields() {
            document.getElementById('cardFields').classList.add('hidden');
            document.getElementById('bankFields').classList.add('hidden');
            document.getElementById('paypalFields').classList.add('hidden');
            document.getElementById('cryptoFields').classList.add('hidden');
            
            if (selectedPaymentMethod === 'card') {
                document.getElementById('cardFields').classList.remove('hidden');
                document.getElementById('paymentDetailsSubtitle').textContent = 'Enter your card information';
            } else if (selectedPaymentMethod === 'bank') {
                document.getElementById('bankFields').classList.remove('hidden');
                document.getElementById('paymentDetailsSubtitle').textContent = 'Use the bank details below to make your transfer';
            } else if (selectedPaymentMethod === 'paypal') {
                document.getElementById('paypalFields').classList.remove('hidden');
                document.getElementById('paymentDetailsSubtitle').textContent = 'Complete your donation via PayPal';
            } else if (selectedPaymentMethod === 'crypto') {
                document.getElementById('cryptoFields').classList.remove('hidden');
                document.getElementById('paymentDetailsSubtitle').textContent = 'Send cryptocurrency to the wallet addresses below';
            }
        }

        // Override nextStep to show payment fields when moving to step 3
        const originalNextStep = nextStep;
        nextStep = function() {
            if (currentStep === 2 && selectedPaymentMethod) {
                originalNextStep();
                showPaymentFields();
            } else {
                originalNextStep();
            }
        };

        function selectBankType(type, btn) {
            document.querySelectorAll('.bank-tab').forEach(t => t.classList.remove('active'));
            btn.classList.add('active');
            
            if (type === 'domestic') {
                document.getElementById('domesticBank').classList.remove('hidden');
                document.getElementById('internationalBank').classList.add('hidden');
            } else {
                document.getElementById('domesticBank').classList.add('hidden');
                document.getElementById('internationalBank').classList.remove('hidden');
            }
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert('Copied to clipboard!');
            });
        }

        function updateImpactText() {
            const impacts = {
                25: 'Your $25 donation can provide essential medications for 2 elderly patients.',
                50: 'Your $50 donation can fund a mental health session for a medical student.',
                100: 'Your $100 donation can provide medical supplies for 5 elderly patients for a month.',
                250: 'Your $250 donation can sponsor a medical student\'s textbooks for a semester.',
                500: 'Your $500 donation can fund a complete health checkup camp for 20 elderly individuals.',
                1000: 'Your $1000 donation can provide a full scholarship for a medical student\'s semester.'
            };
            const text = impacts[selectedAmount] || `Your $${selectedAmount} donation will make a significant impact on our mission.`;
            document.getElementById('impactText').textContent = text;
        }

        function updateSummary() {
            document.getElementById('summaryAmount').textContent = `$${selectedAmount.toFixed(2)}`;
            document.getElementById('summaryFrequency').textContent = selectedFrequency === 'one-time' ? 'One-Time' : 'Monthly';
            const methods = { card: 'Credit Card', bank: 'Bank Transfer', paypal: 'PayPal', crypto: 'Cryptocurrency' };
            document.getElementById('summaryMethod').textContent = methods[selectedPaymentMethod] || 'Not selected';
            document.getElementById('summaryTotal').textContent = `$${selectedAmount.toFixed(2)}`;
        }

        function formatCardNumber(input) {
            let value = input.value.replace(/\s/g, '').replace(/\D/g, '');
            let formatted = value.match(/.{1,4}/g)?.join(' ') || value;
            input.value = formatted;
        }

        function formatExpiry(input) {
            let value = input.value.replace(/\D/g, '');
            if (value.length >= 2) {
                value = value.slice(0, 2) + '/' + value.slice(2);
            }
            input.value = value;
        }

        function completeDonation(e) {
            e.preventDefault();
            alert('🎉 Thank you for your generous donation of $' + selectedAmount + '! You will receive a confirmation email shortly.');
        }
        
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function toggleMobileNav() {
            document.getElementById('mobileNav').classList.toggle('hidden');
        }

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const href = this.getAttribute('href');
                if (href.length > 1) {
                    e.preventDefault();
                    const target = document.querySelector(href);
                    if (target) {
                        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                }
            });
        });

        // Active TOC link highlighting
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('.section-card[id]');
            const tocLinks = document.querySelectorAll('.toc-link');
            
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop - 150;
                if (window.scrollY >= sectionTop) {
                    current = section.getAttribute('id');
                }
            });

            tocLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.add('active');
                }
            });
        });
    
 function reveal() {
            document.querySelectorAll('.reveal').forEach(el => {
                const windowHeight = window.innerHeight;
                const elementTop = el.getBoundingClientRect().top;
                if (elementTop < windowHeight - 100) {
                    el.classList.add('active');
                }
            });
        }
        window.addEventListener('scroll', reveal);
        reveal();

        // Active sidebar link highlighting
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('.team-section');
            const sidebarLinks = document.querySelectorAll('.sidebar-link');
            
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop - 150;
                if (window.scrollY >= sectionTop) {
                    current = section.getAttribute('id');
                }
            });

            sidebarLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.add('active');
                }
            });
        });

        // Smooth scroll for sidebar links
        document.querySelectorAll('.sidebar-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const target = document.querySelector(targetId);
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    </script>
@endpush