<%
  const metricsData = (typeof metrics !== "undefined" && metrics) ? metrics : null;
  const metricDescription = metricsData && metricsData.description ? metricsData.description : "";
  const metricItems = metricsData && Array.isArray(metricsData.items)
    ? metricsData.items.slice(0, 3)
    : [];
%>

<% if (metricDescription || metricItems.length > 0) { %>
  <section class="metricsStrip">
    <% if (metricDescription) { %>
      <div class="container metricsStrip__copy">
        <p class="metricsStrip__text"><%= metricDescription %></p>
      </div>
    <% } %>

    <% if (metricItems.length > 0) { %>
      <div class="container metricsStrip__inner">
        <% metricItems.forEach((item) => { %>
          <div class="metricCard">
            <div
              class="metricCard__num"
              data-target="<%= parseInt(item.value || '0', 10) || 0 %>"
              data-suffix="<%= item.suffix || '' %>"
            >0</div>
            <div class="metricCard__label"><%= item.label || "" %></div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </section>
<% } %>

<script>
  (function () {
    if (window.metricsAnimationInitialized) return;
    window.metricsAnimationInitialized = true;

    function animateMetrics() {
      const counters = document.querySelectorAll(".metricCard__num[data-target]");
      if (!counters.length) return;

      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;

          const el = entry.target;
          const target = parseInt(el.getAttribute("data-target") || "0", 10);
          const suffix = el.getAttribute("data-suffix") || "";
          const duration = 1800;
          const startTime = performance.now();

          function updateCounter(now) {
            const progress = Math.min((now - startTime) / duration, 1);
            const eased = 1 - Math.pow(1 - progress, 3);
            const value = Math.floor(target * eased);

            el.innerHTML =
              value.toLocaleString() +
              (suffix ? `<span class="metricSuffix">${suffix}</span>` : "");

            if (progress < 1) {
              requestAnimationFrame(updateCounter);
            } else {
              el.innerHTML =
                target.toLocaleString() +
                (suffix ? `<span class="metricSuffix">${suffix}</span>` : "");
            }
          }

          requestAnimationFrame(updateCounter);
          obs.unobserve(el);
        });
      }, { threshold: 0.35 });

      counters.forEach((counter) => observer.observe(counter));
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", animateMetrics);
    } else {
      animateMetrics();
    }
  })();
</script>
