@php($data = $section['data'] ?? [])
<section class="relative bg-cedar py-16 text-cream"><div class="vision-stats-grid container-page grid grid-cols-2 gap-8 text-center md:grid-cols-4">@foreach (['investment', 'products', 'certifications', 'ecosystem'] as $key) @php($value = (string) ($data[$key.'_value'] ?? '')) @if (preg_match('/^(\d+)(.*)$/', $value, $matches))<div class="space-y-2"><p class="font-display text-5xl tabular-nums md:text-6xl" data-vision-count="{{ $matches[1] }}" data-vision-suffix="{{ $matches[2] }}">{{ $value }}</p>@else<div class="space-y-2"><p class="font-display text-5xl tabular-nums md:text-6xl">{{ $value }}</p>@endif<p class="text-xs uppercase tracking-[.18em] text-cream/75">{{ $data[$key.'_label'] ?? '' }}</p></div>@endforeach</div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="vision.stats" :key="'vision-inline-'.$locale.'-stats'" />@endcan</section>
<script>
document.querySelectorAll('[data-vision-count]').forEach(function (element) {
    var observer = new IntersectionObserver(function (entries) {
        if (!entries[0].isIntersecting) return;
        var target = Number(element.dataset.visionCount), suffix = element.dataset.visionSuffix || '', start = performance.now();
        function tick(now) { var progress = Math.min(1, (now - start) / 2200); element.textContent = Math.round(target * (1 - Math.pow(1 - progress, 3))) + suffix; if (progress < 1) requestAnimationFrame(tick); }
        requestAnimationFrame(tick); observer.disconnect();
    }, { threshold: 0.4 });
    observer.observe(element);
});
</script>