<div class="about-features-section" id="about-features">
    <div class="about-features-container">
        <!-- 统计数据展示 -->
        <div class="about-features-stats">
            <div class="about-features-stat-item">
                <div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="200">50</span>+</div>
                <div class="about-stat-label">知识产权</div>
            </div>
            
            <div class="about-features-stat-item">
                <div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="400">0</span>+</div>
                <div class="about-stat-label">中大型电力工程</div>
            </div>
            
            <div class="about-features-stat-item">
                <div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="1.2">0</span>Gwp+</div>
                <div class="about-stat-label">自持及代运营电站</div>
            </div>
            
            <div class="about-features-stat-item">
                <div class="text-[48px] text-white font-bold mb-2"> <span class="about-counter" data-target="10">0</span>Gwp+</div>
                <div class="about-stat-label">光伏电站业绩</div>
            </div>
        </div>
    </div>
</div>
<script>
    const counters = document.querySelectorAll('.about-counter');
    const speed = 200; // The lower the slower

    const animateCounters = () => {
        counters.forEach(counter => {
            const updateCount = () => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const inc = target / speed;
                console.log(count, target, inc);
                if (count < target) {
                    counter.innerText = Math.ceil(count + inc);
                    setTimeout(updateCount, 20); // Update speed
                } else {
                    counter.innerText = target;
                }
            };
            updateCount();
        });
    };

    // Trigger animation when section is in view
    let hasAnimated = false;

    const section = document.querySelector('#about-features');
    const observer = new IntersectionObserver((entries) => {
        if(entries[0].isIntersecting && !hasAnimated) {
            animateCounters();
            hasAnimated = true;
        }
    }, { threshold: 0.5 });

    if(section) {
        observer.observe(section);
    }
</script>