document.addEventListener('DOMContentLoaded', function () { // 1. Vision / Mission Tabs Switcher const tabButtons = document.querySelectorAll('[data-tab]'); const tabPanels = document.querySelectorAll('[data-panel]'); tabButtons.forEach(button => { button.addEventListener('click', () => { const target = button.getAttribute('data-tab'); tabButtons.forEach(btn => { btn.classList.remove('is-active'); btn.setAttribute('aria-selected', 'false'); }); tabPanels.forEach(panel => { panel.classList.remove('is-active'); panel.hidden = true; }); button.classList.add('is-active'); button.setAttribute('aria-selected', 'true'); const activePanel = document.querySelector(`[data-panel="${target}"]`); if (activePanel) { activePanel.classList.add('is-active'); activePanel.hidden = false; } }); }); // 2. Dynamic Animated Counter Engine const statNumbers = document.querySelectorAll('.ussia-stat-number'); let animated = false; const animateStats = () => { statNumbers.forEach(counter => { const target = +counter.getAttribute('data-target'); const count = +counter.innerText.replace('+', ''); const increment = target / 80; if (count < target) { counter.innerText = Math.ceil(count + increment) + '+'; setTimeout(animateStats, 30); } else { counter.innerText = target.toLocaleString() + '+'; } }); }; // Trigger counters on Scroll window.addEventListener('scroll', () => { const statsSection = document.getElementById('ussia-impact'); if (statsSection) { const sectionPos = statsSection.getBoundingClientRect().top; const screenPos = window.innerHeight / 1.3; if (sectionPos < screenPos && !animated) { animated = true; animateStats(); } } }); });