script.js

document.addEventListener('DOMContentLoaded', function() {
    // Range input value updaters
    const rangeInputs = document.querySelectorAll('input[type="range"]');
    
    rangeInputs.forEach(input => {
        const valueDisplay = input.nextElementSibling.querySelector('span');
        const min = parseInt(input.min);
        const max = parseInt(input.max);
        
        // Initial value display
        if (input.id === 'termMonths') {
            const years = Math.round(input.value / 12);
            valueDisplay.textContent = `${input.value} months (${years} years)`;
        } else if (input.id === 'downPaymentPercent') {
            valueDisplay.textContent = `${input.value}%`;
        } else {
            valueDisplay.textContent = input.value;
        }
        
        // Update on change
        input.addEventListener('input', function() {
            if (this.id === 'termMonths') {
                const years = Math.round(this.value / 12);
                valueDisplay.textContent = `${this.value} months (${years} years)`;
            } else if (this.id === 'downPaymentPercent') {
                valueDisplay.textContent = `${this.value}%`;
            } else {
                valueDisplay.textContent = this.value;
            }
        });
    });

    // Simulate button click handler
    const simulateBtn = document.querySelector('.bg-gradient-to-r.from-green-500');
    if (simulateBtn) {
        simulateBtn.addEventListener('click', function() {
            // Show loading state
            this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Calculating...';
            feather.replace();
            
            // Simulate API call delay
            setTimeout(() => {
                // Scroll to results section
                document.querySelector('.lg\\:col-span-2').scrollIntoView({ 
                    behavior: 'smooth' 
                });
                
                // Reset button text
                this.textContent = 'Calculate Options';
            }, 1500);
        });
    }

    // Option selection handler
    const optionSelectBtns = document.querySelectorAll('.border.border-gray-200 button');
    optionSelectBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // Remove selected state from all options
            optionSelectBtns.forEach(b => {
                b.classList.remove('bg-green-500', 'hover:bg-green-600', 'text-white');
                b.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
                b.textContent = 'Select';
            });
            
            // Add selected state to clicked option
            this.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
            this.classList.add('bg-green-500', 'hover:bg-green-600', 'text-white');
            this.textContent = 'Selected';
            
            // Show next steps (simulated)
            const nextSteps = document.createElement('div');
            nextSteps.className = 'mt-8 bg-green-50 border border-green-200 rounded-xl p-6';
            nextSteps.innerHTML = `
                <h3 class="text-lg font-bold text-green-800 mb-2">Next Steps</h3>
                <p class="text-green-700 mb-4">Your selected financing option has been saved. Click below to proceed with your application.</p>
                <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg">
                    Continue Application
                </button>
            `;
            
            // Remove existing next steps if any
            const existing = document.querySelector('.bg-green-50.border-green-200');
            if (existing) existing.remove();
            
            // Insert next steps after options
            document.querySelector('.space-y-4').insertAdjacentElement('afterend', nextSteps);
            
            // Add click handler for continue button
            nextSteps.querySelector('button').addEventListener('click', function() {
                alert('Application process would continue here in a real implementation.');
            });
        });
    });
});