$w.onReady(function () {
    const targets = [
        { id: 'text18', endValue: 2021, suffix: '' },
        { id: 'text21', endValue: 50, suffix: 'K+' },
        { id: 'text23', endValue: 2000, suffix: '+' },
        { id: 'text25', endValue: 99.9, suffix: '%' }
    ];
    const duration = 2000;

    targets.forEach(target => {
        $w(`#${target.id}`).text = "0" + target.suffix;
    });

    function countUp(elementId, endValue, suffix, duration) {
        let startValue = 0;
        const increment = endValue / (duration / 16);
        let currentValue = startValue;

        const interval = setInterval(() => {
            currentValue += increment;
            if (currentValue >= endValue) {
                currentValue = endValue;
                clearInterval(interval);
            }
            if (Number.isInteger(endValue)) {
                $w(`#${elementId}`).text = Math.floor(currentValue).toLocaleString() + suffix;
            } else {
                $w(`#${elementId}`).text = currentValue.toFixed(1) + suffix;
            }
        }, 16);
    }

    targets.forEach(target => {
        let hasAnimated = false;
        $w(`#${target.id}`).onViewportEnter(() => {
            if (!hasAnimated) {
                countUp(target.id, target.endValue, target.suffix, duration);
                hasAnimated = true;
            }
        });
    });
});