 (function() {
    // Store the animation state for each circle
    const circleStateCache = new Map();

    // Function to apply percentage to circle
    function applyCirclePercentage(circle) {
      const percentage = parseInt(circle.getAttribute('data-percentage'));
      const circumference = 2 * Math.PI * 50; // r = 50 (314.159...)
      const progressCircle = circle.querySelector('.circle-progress');

      // Calculate the offset based on percentage
      const offset = circumference - (percentage / 100) * circumference;

      // Store the calculated state in our cache
      const circleId = circle.closest('.statistic-item').getAttribute('data-block-id') ||
                       Array.from(document.querySelectorAll('.statistic-circle')).indexOf(circle);

      circleStateCache.set(circleId, {
        percentage: percentage,
        offset: offset
      });

      // Apply immediately without delay
      progressCircle.style.strokeDashoffset = offset;
    }

    // Function to initialize all statistic circles
    function initStatCircles() {
      const circles = document.querySelectorAll('.statistic-circle');

      circles.forEach(circle => {
        applyCirclePercentage(circle);
      });
    }

    // Function to handle intersection observer
    function handleIntersection(entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const circles = entry.target.querySelectorAll('.statistic-circle');
          circles.forEach(circle => {
            applyCirclePercentage(circle);
          });
        }
      });
    }

    // Function to bind theme editor events
    function bindThemeEditorEvents() {
      if (window.Shopify && window.Shopify.designMode) {
        // When settings are changed in the theme editor
        document.addEventListener('shopify:section:load', function(event) {
          if (event.target.classList.contains('statistics-section')) {
            initStatCircles();
          }
        });

        // When blocks are reordered, added or removed
        document.addEventListener('shopify:block:select', function(event) {
          const circle = event.target.querySelector('.statistic-circle');
          if (circle) {
            applyCirclePercentage(circle);
          }
        });

        // When section settings are changed
        document.addEventListener('shopify:section:select', function(event) {
          if (event.target.classList.contains('statistics-section')) {
            initStatCircles();
          }
        });

        // When a section is deselected, ensure animations are still visible
        document.addEventListener('shopify:section:deselect', function(event) {
          if (event.target.classList.contains('statistics-section')) {
            initStatCircles();
          }
        });

        // If settings are updated but section isn't reloaded
        document.addEventListener('shopify:section:reorder', function() {
          initStatCircles();
        });
      }
    }

    // Setup intersection observer for animation on scroll
    function setupIntersectionObserver() {
      const observer = new IntersectionObserver(handleIntersection, {
        threshold: 0.1,
        rootMargin: '0px 0px 50px 0px'
      });

      document.querySelectorAll('.statistics-section').forEach(section => {
        observer.observe(section);
      });

      return observer;
    }

    // Initialize when DOM is ready
    function init() {
      // First apply the initial state
      initStatCircles();

      // Then set up observers and event handlers
      const observer = setupIntersectionObserver();
      bindThemeEditorEvents();

      // Make sure we retain initial animation even if page is already scrolled
      setTimeout(initStatCircles, 100);
    }

    // Initialize on DOMContentLoaded
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
    } else {
      init(); // DOM already loaded
    }
  })();