function animateCounter(element, startValue, endValue, duration, decimalPlaces = 0, suffix = '') {
  const startTime = performance.now();

  function update(now) {
    const elapsed = now - startTime;
    const progress = Math.min(elapsed / duration, 1);

    const current = startValue + (endValue - startValue) * progress;
    element.textContent = current.toFixed(decimalPlaces) + suffix;

    if (progress < 1) {
      requestAnimationFrame(update);
    } else {
      element.textContent = endValue.toFixed(decimalPlaces) + suffix;
    }
  }

  requestAnimationFrame(update);
}

function startAllCounters() {
  document.querySelectorAll('.abschluesse, .erfahrung, .verbesserung, .quote').forEach((el) => {
    if (el.dataset.counted === '1') return;

    const target = parseFloat(el.getAttribute('data-target'));
    if (isNaN(target)) return;

    el.dataset.counted = '1';

    if (el.classList.contains('abschluesse')) {
      animateCounter(el, 0, target, 2000, 0, '');
    } else if (el.classList.contains('erfahrung')) {
      animateCounter(el, 0, target, 2000, 0, '');
    } else if (el.classList.contains('verbesserung')) {
      animateCounter(el, 0, target, 2000, 1, '');
    } else if (el.classList.contains('quote')) {
      animateCounter(el, 1, target, 2000, 0, '%');
    }
  });
}

function createObserver() {
  const firstCounter = document.querySelector('.abschluesse, .erfahrung, .verbesserung, .quote');
  if (!firstCounter) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      startAllCounters();
      observer.disconnect();
    });
  }, { threshold: 0.1 });

  observer.observe(firstCounter);
}

document.addEventListener('DOMContentLoaded', createObserver);