---
import { getDynamicStats, getYearDeclension, getCaseDeclension, getClientDeclension } from '@utils/stats.utils.ts';

const stats = getDynamicStats();

const statIcons = [
    "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z", // Calendar
    "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z", // Check circle
    "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z", // Users
    "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" // Clock
];
---

<section class="relative py-20 overflow-hidden bg-gray-50">
    <!-- Декоративный фон -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl"></div>
    </div>

    <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10">
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
            {stats.map((stat, index) => (
                    <div class="group relative bg-white/80 backdrop-blur-xl p-8 rounded-2xl shadow-lg border border-white/50 hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 hover:-translate-y-1 transition-all duration-500 text-center overflow-hidden">
                        <!-- Декоративный фон при hover -->
                        <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-blue-primary)]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                        <!-- Иконка -->
                        <div class="relative w-14 h-14 mx-auto mb-4 bg-[var(--color-blue-primary)]/10 rounded-xl flex items-center justify-center group-hover:bg-[var(--color-blue-primary)] transition-colors duration-300">
                            <svg class="w-7 h-7 text-[var(--color-blue-primary)] group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d={statIcons[index]}/>
                            </svg>
                        </div>

                        <!-- Цифра -->
                        <div class="flex items-baseline justify-center gap-1 mb-2">
                        <span
                                class="stat-counter text-4xl font-black text-gray-900 tracking-tight"
                                data-target={stat.number}
                        >
                            0
                        </span>
                            <span class="text-2xl font-bold text-[var(--color-blue-primary)]">{stat.suffix}</span>
                        </div>

                        <!-- Текст -->
                        <p class="text-xs font-bold text-gray-500 uppercase tracking-wider">
                            {stat.text.includes('Лет практики') ? `${stat.number} ${getYearDeclension(stat.number)} практики` :
                                stat.text.includes('Успешных дел') ? `${stat.number} ${stat.suffix} ${stat.text.toLowerCase()}` :
                                    stat.text.includes('Клиентов') ? `${stat.number} довольных ${getClientDeclension(stat.number)}` :
                                        stat.text.includes('На связи') ? 'в режиме 24/7' : stat.text}
                        </p>
                    </div>
            ))}
        </div>
    </div>
</section>

<script>
    const animateStats = () => {
        const counters = document.querySelectorAll('.stat-counter');
        const speed = 2000;

        const startAnimation = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target as HTMLElement;
                    const target = +counter.getAttribute('data-target')!;

                    let startTime: number | null = null;

                    const step = (timestamp: number) => {
                        if (!startTime) startTime = timestamp;
                        const progress = timestamp - startTime;
                        const percentage = Math.min(progress / speed, 1);
                        const ease = 1 - Math.pow(1 - percentage, 3);
                        const current = Math.floor(ease * target);

                        counter.innerText = current.toString();

                        if (percentage < 1) {
                            window.requestAnimationFrame(step);
                        } else {
                            counter.innerText = target.toString();
                        }
                    };

                    window.requestAnimationFrame(step);
                    observer.unobserve(counter);
                }
            });
        };

        const observer = new IntersectionObserver(startAnimation, {
            root: null,
            rootMargin: '0px',
            threshold: 0.5
        });

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

    animateStats();
    document.addEventListener('astro:after-swap', animateStats);
</script>