script.js

document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const amountButtons = document.querySelectorAll('.amount-btn');
    const currencyButtons = document.querySelectorAll('.currency-btn');
    const form = document.getElementById('checkoutForm');
    const userNameInput = document.getElementById('userName');
    const walletAddressInput = document.getElementById('walletAddress');
    const walletFeedback = document.getElementById('walletFeedback');
    const proceedButton = document.getElementById('proceedButton');
    const simulatedReturnBox = document.getElementById('simulatedReturnBox');
    const returnAmountEl = document.getElementById('returnAmount');
    const totalAmountEl = document.getElementById('totalAmount');
    const selectedAmountInput = document.getElementById('selectedAmount');
    const selectedCurrencyInput = document.getElementById('selectedCurrency');
    
// Preview Elements
    const previewAmount = document.getElementById('previewAmount');
    const previewCurrency = document.getElementById('previewCurrency');
    const previewWalletType = document.getElementById('previewWalletType');
    const currencyNote = document.getElementById('currencyNote');
    
    // State
    let selectedAmount = null;
    let selectedCurrency = null;
    let simulatedReturn = null;
    
    // Amount Selection
    amountButtons.forEach(button => {
        button.addEventListener('click', () => {
            amountButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            selectedAmount = parseInt(button.dataset.value);
            selectedAmountInput.value = selectedAmount;
            updatePreview();
            validateForm();
            // Handle simulated return for $50
            if(selectedAmount === 50) {
                const percentage = Math.floor(Math.random() * 21) + 20; // 20-40
                simulatedReturn = (50 * percentage / 100).toFixed(2);
                const totalAmount = (50 + parseFloat(simulatedReturn)).toFixed(2);
                returnAmountEl.textContent = `Bonus return: ${simulatedReturn} at ${percentage}%`;
                totalAmountEl.textContent = `Total amount: ${totalAmount}`;
                simulatedReturnBox.classList.remove('hidden');
            } else {
                simulatedReturnBox.classList.add('hidden');
}
        });
    });
    
    // Currency Selection
    currencyButtons.forEach(button => {
        button.addEventListener('click', () => {
            currencyButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            selectedCurrency = button.dataset.currency;
            selectedCurrencyInput.value = selectedCurrency;
            updatePreview();
            validateForm();
            updateCurrencyNote();
        });
    });
    
    // Input Validation
    userNameInput.addEventListener('input', validateForm);
    walletAddressInput.addEventListener('input', validateWalletAddress);
    
    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (validateForm()) {
            // Redirect to confirmation page with query parameters
            window.location.href = `confirmation.html?amount=${selectedAmount}&currency=${selectedCurrency}`;
        }
    });
    
    // Validation Functions
    function validateWalletAddress() {
        const address = walletAddressInput.value.trim();
        let isValid = false;
        let message = '';
        
        if(!selectedCurrency) {
            walletFeedback.textContent = 'Please select a currency first';
            walletFeedback.className = 'mt-2 text-sm text-yellow-400';
            walletAddressInput.classList.remove('valid', 'invalid');
            return false;
        }
        
        switch(selectedCurrency) {
            case 'USDT':
            case 'BNB':
                // ^0x[a-fA-F0-9]{40}$
                const bep20Regex = /^0x[a-fA-F0-9]{40}$/;
                isValid = bep20Regex.test(address);
                message = isValid ? 'Valid BEP20 address' : 'Invalid BEP20 address (must start with 0x and be 42 characters)';
                break;
                
            case 'BTC':
                // ^(bc1[ac-hj-np-z02-9]{11,71}|[13][a-km-zA-HJ-NP-Z1-9]{25,34})$
                const btcRegex = /^(bc1[ac-hj-np-z02-9]{11,71}|[13][a-km-zA-HJ-NP-Z1-9]{25,34})$/;
                isValid = btcRegex.test(address);
                message = isValid ? 'Valid Bitcoin address' : 'Invalid Bitcoin address format';
                break;
                
            case 'SOL':
                // ^[1-9A-HJ-NP-Za-km-z]{32,44}$
                const solRegex = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/;
                isValid = solRegex.test(address);
                message = isValid ? 'Valid Solana address' : 'Invalid Solana address format';
                break;
        }
        
        // Update UI
        walletFeedback.textContent = message;
        walletFeedback.className = `mt-2 text-sm ${isValid ? 'text-green-400' : 'text-red-400'}`;
        walletAddressInput.classList.toggle('valid', isValid);
        walletAddressInput.classList.toggle('invalid', !isValid && address !== '');
        
        validateForm(); // Re-validate form
        return isValid;
    }
    function validateForm() {
        const isAmountSelected = selectedAmount !== null;
        const isCurrencySelected = selectedCurrency !== null;
        const isNameFilled = userNameInput.value.trim() !== '';
        const isWalletValid = selectedCurrency ? validateWalletAddress() : true; // Allow form to be valid even without wallet validation initially
        
        const isFormValid = isAmountSelected && isCurrencySelected && isNameFilled && (isWalletValid || walletAddressInput.value.trim() === '');
// Update proceed button state
        proceedButton.disabled = !isFormValid;
        if (isFormValid) {
            proceedButton.classList.remove('opacity-50', 'pointer-events-none');
            proceedButton.classList.add('hover:opacity-100');
        } else {
            proceedButton.classList.add('opacity-50', 'pointer-events-none');
            proceedButton.classList.remove('hover:opacity-100');
        }
        return isFormValid;
    }
    
    // Re-validate when wallet address is empty
    walletAddressInput.addEventListener('blur', function() {
        if (this.value.trim() === '') {
            walletFeedback.textContent = '';
            walletFeedback.className = 'mt-2 text-sm';
            this.classList.remove('valid', 'invalid');
            validateForm();
        }
    });
// UI Update Functions
    function updatePreview() {
        previewAmount.textContent = selectedAmount ? `${selectedAmount}` : '$0';
        previewCurrency.textContent = selectedCurrency || '-';
        
        if(selectedCurrency) {
            previewWalletType.textContent = getWalletTypeName(selectedCurrency);
        } else {
            previewWalletType.textContent = '-';
        }
    }
    
    function updateCurrencyNote() {
        let note = '';
        switch(selectedCurrency) {
            case 'USDT':
                note = 'BEP20 addresses start with 0x... (42 chars).';
                break;
            case 'BNB':
                note = 'BEP20 addresses start with 0x... (42 chars).';
                break;
            case 'BTC':
                note = 'Only mainnet formats 1/3/bc1 are accepted in this demo.';
                break;
            case 'SOL':
                note = 'Base58 address; avoid ambiguous characters.';
                break;
            default:
                note = 'Select a currency to see format requirements.';
        }
        currencyNote.textContent = note;
    }
    
    function getWalletTypeName(currency) {
        switch(currency) {
            case 'USDT': return 'BEP20';
            case 'BNB': return 'BEP20';
            case 'BTC': return 'Bitcoin';
            case 'SOL': return 'Solana';
            default: return '-';
        }
    }
    
    // Initialize
    updatePreview();
    updateCurrencyNote();
});