---
import AnimatedCounter from './AnimatedCounter.astro';

// Получаем массив stats напрямую из пропсов Hero
const { stats } = Astro.props;
---

<div class="relative z-10 bg-black/20 backdrop-blur-sm py-8">
    <div class="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((stat, index) => (
                <div class="text-center animate-fade-in-up" style={`--animation-delay: ${index * 100 + 800}ms;`}>
                    <AnimatedCounter value={stat.value} />
                    <p class="text-sm text-gray-200">{stat.label}</p>
                </div>
        ))}
    </div>
</div>

<style>
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
        opacity: 0;
    }
</style>
