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();
}
}
});
});