{{/* Hugo Blox: Stats */}}
{{/* Documentation: https://hugoblox.com/blocks/ */}}
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}
{{ $title := $block.content.title | emojify | $page.RenderString }}
{{ $text := $block.content.text | emojify | $page.RenderString }}
{{ $layout := $block.design.layout | default "cards" }}

<div class="py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    {{/* Section Header */}}
    {{ if or $title $text }}
    <div class="text-center mb-12 lg:mb-16">
      {{ with $title }}
      <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white tracking-tight mb-4">
        {{ . }}
      </h2>
      {{ end }}
      {{ with $text }}
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
        {{ . }}
      </p>
      {{ end }}
    </div>
    {{ end }}

    {{/* Cards Layout */}}
    {{ if eq $layout "cards" }}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{{ len $block.content.items }} gap-6 lg:gap-8">
      {{ range $idx, $item := $block.content.items }}
      <div class="group relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 dark:border-gray-700 hover:border-primary-200 dark:hover:border-primary-800">
        
        {{/* Background Gradient */}}
        <div class="absolute inset-0 bg-gradient-to-br from-primary-50 to-transparent dark:from-primary-900/20 dark:to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        
        <div class="relative p-8 text-center">
          {{/* Icon */}}
          {{ if $item.icon }}
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-primary-100 dark:bg-primary-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300">
            {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-8 h-8 text-primary-600 dark:text-primary-400\"") }}
          </div>
          {{ end }}
          
          {{/* Statistic */}}
          <div class="mb-3">
            <h3 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300 counter" data-target="{{ $item.statistic | replaceRE `[^0-9.]` "" }}">
              {{ $item.statistic | $page.RenderString }}
            </h3>
          </div>
          
          {{/* Description */}}
          <p class="text-sm sm:text-base font-medium text-gray-600 dark:text-gray-300 leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
            {{ $item.description | $page.RenderString }}
          </p>
          
          {{/* Optional Sub-metric */}}
          {{ with $item.sub_metric }}
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            {{ . }}
          </p>
          {{ end }}
        </div>
      </div>
      {{ end }}
    </div>
    
    {{/* Compact Layout */}}
    {{ else if eq $layout "compact" }}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 overflow-hidden">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{{ len $block.content.items }} divide-y sm:divide-y-0 sm:divide-x divide-gray-200 dark:divide-gray-700">
        {{ range $idx, $item := $block.content.items }}
        <div class="group p-8 text-center hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-300">
          {{ if $item.icon }}
          <div class="inline-flex items-center justify-center w-12 h-12 mb-4 bg-primary-100 dark:bg-primary-900/50 rounded-lg group-hover:scale-110 transition-transform duration-300">
            {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-6 h-6 text-primary-600 dark:text-primary-400\"") }}
          </div>
          {{ end }}
          
          <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2 counter" data-target="{{ $item.statistic | replaceRE `[^0-9.]` "" }}">
            {{ $item.statistic | $page.RenderString }}
          </h3>
          
          <p class="text-sm font-medium text-gray-600 dark:text-gray-300 leading-relaxed">
            {{ $item.description | $page.RenderString }}
          </p>
        </div>
        {{ end }}
      </div>
    </div>
    
    {{/* Minimal Layout */}}
    {{ else }}
    <div class="grid grid-cols-2 lg:grid-cols-{{ len $block.content.items }} gap-8 lg:gap-12">
      {{ range $item := $block.content.items }}
      <div class="text-center group">
        {{ if $item.icon }}
        <div class="inline-flex items-center justify-center w-14 h-14 mb-4 bg-primary-100 dark:bg-primary-900/50 rounded-full group-hover:scale-110 transition-transform duration-300">
          {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-7 h-7 text-primary-600 dark:text-primary-400\"") }}
        </div>
        {{ end }}
        
        <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2 counter" data-target="{{ $item.statistic | replaceRE `[^0-9.]` "" }}">
          {{ $item.statistic | $page.RenderString }}
        </h3>
        
        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
          {{ $item.description | $page.RenderString }}
        </p>
      </div>
      {{ end }}
    </div>
    {{ end }}
  </div>
</div>

{{/* Enhanced Animation CSS */}}
<style>
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgb(59 130 246 / 0);
  }
}

/* Intersection Observer Animation */
.stats-animate {
  animation: fadeInUp 0.8s ease-out forwards;
}

.stats-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.stats-item.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation delays */
.stats-item:nth-child(1) { transition-delay: 0ms; }
.stats-item:nth-child(2) { transition-delay: 150ms; }
.stats-item:nth-child(3) { transition-delay: 300ms; }
.stats-item:nth-child(4) { transition-delay: 450ms; }
.stats-item:nth-child(5) { transition-delay: 600ms; }

/* Number counting animation */
@keyframes countUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

.counter-animate {
  animation: countUp 0.6s ease-out;
}

/* Hover glow effect */
.stats-card-glow:hover {
  animation: pulse-glow 2s infinite;
}
</style>

{{/* Animation JavaScript for Counter and Intersection Observer */}}
<script>
document.addEventListener('DOMContentLoaded', function () {
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function parseTarget(counter) {
    const dataTarget = counter.getAttribute('data-target');
    const fallbackMatch = counter.textContent.match(/[0-9,.]+/);
    const raw = (dataTarget ?? (fallbackMatch ? fallbackMatch[0] : '0')).replace(/,/g, '');
    const num = Number(raw);
    return isNaN(num) ? 0 : num;
  }

  function extractParts(text) {
    const parts = text.match(/([^0-9]*)([0-9][0-9,.]*)(.*)/);
    return {
      prefix: parts ? parts[1] : '',
      numberPart: parts ? parts[2] : '',
      suffix: parts ? parts[3] : ''
    };
  }

  function animateCountersFor(container) {
    container.classList.add('animate');

    const counters = container.querySelectorAll('.counter');
    counters.forEach(counter => {
      const target = parseTarget(counter);
      if (target <= 0) return;

      const { prefix, numberPart, suffix } = extractParts(counter.textContent);
      const decimals = (numberPart.split('.')[1] || '').length;
      const formatter = new Intl.NumberFormat(undefined, {
        minimumFractionDigits: decimals,
        maximumFractionDigits: decimals,
      });

      if (prefersReducedMotion) {
        counter.textContent = `${prefix}${formatter.format(target)}${suffix}`;
        return;
      }

      const duration = 2000; // 2 seconds
      const start = Date.now();

      function update() {
        const now = Date.now();
        const progress = Math.min((now - start) / duration, 1);
        const easeOut = 1 - Math.pow(1 - progress, 3); // Ease-out cubic
        const current = target * easeOut;
        counter.textContent = `${prefix}${formatter.format(current)}${suffix}`;
        if (progress < 1) requestAnimationFrame(update);
      }

      requestAnimationFrame(update);
    });
  }

  function isInView(el) {
    const rect = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    const vw = window.innerWidth || document.documentElement.clientWidth;
    return rect.top < vh * 0.9 && rect.bottom > 0 && rect.left < vw && rect.right > 0;
  }

  // Intersection Observer for stats animation (with near-fold sensitivity)
  const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        animateCountersFor(entry.target);
        statsObserver.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.2,
    rootMargin: '0px 0px -10% 0px'
  });

  // Observe all stats containers (and trigger immediately if already visible)
  const statsContainers = document.querySelectorAll('.stats-item, [class*="grid"] > div');
  statsContainers.forEach(container => {
    container.classList.add('stats-item');
    if (isInView(container)) {
      animateCountersFor(container);
    } else {
      statsObserver.observe(container);
    }
  });
});
</script>