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

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}
{{ $content := $block.content }}
{{ if not (reflect.IsMap $content) }}{{ $content = dict }}{{ end }}
{{ $design := $block.design }}
{{ if not (reflect.IsMap $design) }}{{ $design = dict }}{{ end }}

{{ $title := "" }}
{{ $title_raw := index $content "title" }}
{{ if $title_raw }}
  {{ $title = strings.TrimSpace (printf "%v" $title_raw) }}
{{ end }}
{{ if $title }}{{ $title = $title | emojify | $page.RenderString }}{{ end }}

{{ $text := "" }}
{{ $text_raw := index $content "text" }}
{{ if $text_raw }}
  {{ $text = strings.TrimSpace (printf "%v" $text_raw) }}
{{ end }}
{{ if $text }}{{ $text = $text | emojify | $page.RenderString }}{{ end }}

{{ $layout := "cards" }}
{{ $layout_raw := index $design "layout" }}
{{ if eq (printf "%T" $layout_raw) "string" }}
  {{ $layout_candidate := lower (strings.TrimSpace $layout_raw) }}
  {{ if in (slice "cards" "compact" "minimal") $layout_candidate }}
    {{ $layout = $layout_candidate }}
  {{ end }}
{{ end }}

{{ $items_raw := index $content "items" }}
{{ $items_iter := slice }}
{{ if reflect.IsSlice $items_raw }}
  {{ $items_iter = $items_raw }}
{{ else if and $items_raw (reflect.IsMap $items_raw) }}
  {{ $items_iter = slice $items_raw }}
{{ end }}

{{ $items := slice }}
{{ if gt (len $items_iter) 0 }}
  {{ range $items_iter }}
    {{ if reflect.IsMap . }}
      {{ $icon := "" }}
      {{ $statistic := "" }}
      {{ $description := "" }}
      {{ $sub_metric := "" }}
      {{ with index . "icon" }}{{ $icon = printf "%v" . }}{{ end }}
      {{ with index . "statistic" }}{{ $statistic = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "description" }}{{ $description = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "sub_metric" }}{{ $sub_metric = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ if or $statistic $description }}
        {{ $items = $items | append (dict "icon" $icon "statistic" $statistic "description" $description "sub_metric" $sub_metric) }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

{{ $item_count := len $items }}
{{ if lt $item_count 1 }}{{ $item_count = 1 }}{{ end }}
{{ if gt $item_count 4 }}{{ $item_count = 4 }}{{ end }}
{{ $grid_cols_class := "lg:grid-cols-3" }}
{{ if eq $item_count 1 }}
  {{ $grid_cols_class = "lg:grid-cols-1" }}
{{ else if eq $item_count 2 }}
  {{ $grid_cols_class = "lg:grid-cols-2" }}
{{ else if eq $item_count 4 }}
  {{ $grid_cols_class = "lg:grid-cols-4" }}
{{ end }}
{{ $base_cols_class := "grid-cols-2" }}
{{ if eq $item_count 1 }}{{ $base_cols_class = "grid-cols-1" }}{{ end }}

<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 {{ $grid_cols_class }} gap-6 lg:gap-8">
      {{ range $idx, $item := $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 */}}
          {{ $icon := index $item "icon" }}
          {{ if $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" $icon "attributes" "class=\"w-8 h-8 text-primary-600 dark:text-primary-400\"") }}
          </div>
          {{ end }}
          
          {{/* Statistic */}}
          <div class="mb-3">
            {{ $statistic := index $item "statistic" }}
            <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="{{ $statistic | replaceRE `[^0-9.]` "" }}">
              {{ $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">
            {{ (index $item "description") | $page.RenderString }}
          </p>
          
          {{/* Optional Sub-metric */}}
          {{ with index $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 {{ $grid_cols_class }} divide-y sm:divide-y-0 sm:divide-x divide-gray-200 dark:divide-gray-700">
        {{ range $idx, $item := $items }}
        <div class="group p-8 text-center hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-300">
          {{ $icon := index $item "icon" }}
          {{ if $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" $icon "attributes" "class=\"w-6 h-6 text-primary-600 dark:text-primary-400\"") }}
          </div>
          {{ end }}
          
          {{ $statistic := index $item "statistic" }}
          <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2 counter" data-target="{{ $statistic | replaceRE `[^0-9.]` "" }}">
            {{ $statistic | $page.RenderString }}
          </h3>
          
          <p class="text-sm font-medium text-gray-600 dark:text-gray-300 leading-relaxed">
            {{ (index $item "description") | $page.RenderString }}
          </p>
        </div>
        {{ end }}
      </div>
    </div>
    
    {{/* Minimal Layout */}}
    {{ else }}
    <div class="grid {{ $base_cols_class }} {{ $grid_cols_class }} gap-8 lg:gap-12">
      {{ range $item := $items }}
      <div class="text-center group">
        {{ $icon := index $item "icon" }}
        {{ if $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" $icon "attributes" "class=\"w-7 h-7 text-primary-600 dark:text-primary-400\"") }}
        </div>
        {{ end }}
        
        {{ $statistic := index $item "statistic" }}
        <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2 counter" data-target="{{ $statistic | replaceRE `[^0-9.]` "" }}">
          {{ $statistic | $page.RenderString }}
        </h3>
        
        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
          {{ (index $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>