script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize particles
    if (document.getElementById('coin-particles')) {
        initCoinParticles();
    }

    // Payment method selection
    const paymentMethods = document.querySelectorAll('.payment-method');
    paymentMethods.forEach(method => {
        method.addEventListener('click', function() {
            paymentMethods.forEach(m => m.classList.remove('active'));
            this.classList.add('active');
        });
    });

    // Input focus effects
    const inputs = document.querySelectorAll('.input-glow input');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.querySelector('.glow-effect').style.opacity = '1';
        });
        input.addEventListener('blur', function() {
            this.parentElement.querySelector('.glow-effect').style.opacity = '0';
        });
    });

    // Mobile summary toggle
    const summaryToggle = document.querySelector('.glass-card button');
    if (summaryToggle) {
        summaryToggle.addEventListener('click', function() {
            const content = this.nextElementSibling;
            const icon = this.querySelector('i');
            
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
                icon.setAttribute('data-feather', 'chevron-down');
            } else {
                content.style.maxHeight = content.scrollHeight + 'px';
                icon.setAttribute('data-feather', 'chevron-up');
            }
            feather.replace();
        });
    }

    // Form submission
    const confirmButtons = document.querySelectorAll('.glow-button');
    confirmButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Simulate payment processing
            this.innerHTML = '<span class="flex items-center justify-center"><i data-feather="loader" class="animate-spin mr-2"></i> Processing...</span>';
            feather.replace();
            
            setTimeout(() => {
                // Show success animation
                showSuccessAnimation(this);
            }, 2000);
        });
    });
});

function showSuccessAnimation(button) {
    button.innerHTML = '<i data-feather="check"></i> Payment Successful!';
    feather.replace();
    
    // Create coin burst effect
    const rect = button.getBoundingClientRect();
    const burst = document.createElement('div');
    burst.className = 'coin-burst';
    burst.style.position = 'absolute';
    burst.style.left = `${rect.left + rect.width/2}px`;
    burst.style.top = `${rect.top + rect.height/2}px`;
    document.body.appendChild(burst);
    
    // Remove after animation
    setTimeout(() => {
        burst.remove();
    }, 1000);
}
function showSuccessAnimation(button) {
    button.innerHTML = '<i data-feather="check"></i> Payment Successful!';
    feather.replace();
    
    // Create coin burst effect
    const rect = button.getBoundingClientRect();
    const burst = document.createElement('div');
    burst.className = 'coin-burst';
    burst.style.position = 'fixed';
    burst.style.left = `${rect.left + rect.width/2 - 50}px`;
    burst.style.top = `${rect.top + rect.height/2 - 50}px`;
    document.body.appendChild(burst);
    
    // Redirect after animation
    setTimeout(() => {
        burst.remove();
        window.location.href = 'success.html';
    }, 1000);
}