document.addEventListener('DOMContentLoaded', function() {
    // Animate impact numbers
    const animateNumbers = () => {
        const counters = document.querySelectorAll('#lives-changed, #volunteers, #countries, #projects');
        const speed = 200;
        
        counters.forEach(counter => {
            const target = +counter.innerText.replace('+', '');
            const increment = target / speed;
            let current = 0;
            
            const updateCount = () => {
                current += increment;
                if (current < target) {
                    counter.innerText = Math.floor(current) + (counter.id === 'lives-changed' || counter.id === 'volunteers' ? '+' : '');
                    setTimeout(updateCount, 1);
                } else {
                    counter.innerText = target + (counter.id === 'lives-changed' || counter.id === 'volunteers' ? '+' : '');
                }
            };
            
            updateCount();
            counter.classList.add('count-up');
        });
    };

    // Intersection Observer for animations
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                if (entry.target.id === 'lives-changed') {
                    animateNumbers();
                }
                entry.target.classList.add('animate-fadeIn');
            }
        });
    }, { threshold: 0.1 });

    // Observe elements
    document.querySelectorAll('#lives-changed, #volunteers, #countries, #projects').forEach(el => {
        observer.observe(el);
    });

    // Donation amount selection
    const donationAmounts = document.querySelectorAll('.donation-amount');
    donationAmounts.forEach(button => {
        button.addEventListener('click', function() {
            donationAmounts.forEach(btn => {
                btn.classList.remove('bg-red-100', 'border-red-500', 'text-red-700');
                btn.classList.add('bg-white', 'border-gray-300');
            });
            this.classList.remove('bg-white', 'border-gray-300');
            this.classList.add('bg-red-100', 'border-red-500', 'text-red-700');
            document.getElementById('custom-amount').value = this.textContent.replace('$', '');
        });
    });

    // Form submission
    const donationForm = document.getElementById('donation-form');
    if (donationForm) {
        donationForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // Here you would typically handle the form submission
            alert('Thank you for your donation! A confirmation has been sent to your email.');
            this.reset();
        });
    }

    // Initialize feather icons
    feather.replace();
});