---
import { CURRENT_YEAR } from '@constants/constants.ts';

interface Props {
    title?: string;
    subtitle?: string;
}

const {
    title = "Судебная практика",
    subtitle = `Реальные дела с реальными результатами. Прозрачность и доказательная база данных решений в судах ХМАО-Югры за ${CURRENT_YEAR} год.`
} = Astro.props;

const categories = [
    { id: 'all', label: 'Все дела', count: 124, icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
    { id: 'criminal', label: 'Уголовные', count: 45, icon: 'M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3' },
    { id: 'civil', label: 'Гражданские', count: 38, icon: 'M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3' },
    { id: 'arbitration', label: 'Арбитраж', count: 28, icon: 'M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' },
    { id: 'admin', label: 'Административные', count: 13, icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' }
];
---

<section class="relative py-20 md:py-28 bg-gradient-to-b from-[var(--color-navy)] via-[#0f172a] to-[#0a0f1c] overflow-hidden">
    <!-- Декоративный фон с анимированными элементами -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-[100px] animate-pulse"></div>
        <div class="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-[var(--color-blue-primary)] opacity-[0.05] rounded-full blur-[80px]"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-radial from-white/[0.02] to-transparent rounded-full"></div>
        
        <!-- Тонкая сетка -->
        <div class="absolute inset-0 opacity-[0.02]" style="background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 80px 80px;"></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="text-center mb-16 max-w-3xl mx-auto">
            <span class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-white/10 to-white/5 backdrop-blur-md border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-widest mb-6 shadow-lg shadow-[var(--color-gold)]/5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
                Доказательная база
            </span>

            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight tracking-tight">
                {title}
                <span class="block text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-gold)] via-[var(--color-gold-hover)] to-[var(--color-gold)] mt-2 animate-gradient">в цифрах</span>
            </h1>

            <p class="text-gray-400 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto">
                {subtitle}
            </p>
        </div>

        <!-- Статистика-категории в виде сетки карточек -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-6 max-w-6xl mx-auto" id="case-filters">
            {categories.map((cat, index) => (
                <button
                    data-filter={cat.id}
                    class:list={[
                        "group relative flex flex-col items-center justify-center p-6 md:p-8 rounded-2xl border transition-all duration-500 ease-out",
                        "hover:scale-105 hover:-translate-y-1",
                        index === 0 
                            ? "bg-gradient-to-br from-[var(--color-gold)]/20 to-[var(--color-gold)]/5 border-[var(--color-gold)] shadow-lg shadow-[var(--color-gold)]/20" 
                            : "bg-white/[0.03] backdrop-blur-sm border-white/10 hover:bg-white/[0.06] hover:border-[var(--color-gold)]/30 hover:shadow-xl hover:shadow-[var(--color-gold)]/10"
                    ]}
                >
                    <!-- Иконка категории -->
                    <div class:list={[
                        "w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-all duration-300",
                        index === 0 
                            ? "bg-[var(--color-gold)] text-[var(--color-navy)]" 
                            : "bg-white/10 text-[var(--color-gold)] group-hover:bg-[var(--color-gold)] group-hover:text-[var(--color-navy)]"
                    ]}>
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={cat.icon}/>
                        </svg>
                    </div>

                    <!-- Число -->
                    <span class:list={[
                        "text-3xl md:text-4xl font-bold mb-2 transition-colors",
                        index === 0 ? "text-white" : "text-white group-hover:text-[var(--color-gold)]"
                    ]}>
                        {cat.count}
                    </span>

                    <!-- Название -->
                    <span class="text-gray-400 text-sm font-medium uppercase tracking-wider text-center group-hover:text-gray-300 transition-colors">
                        {cat.label}
                    </span>

                    <!-- Индикатор активности -->
                    <div class:list={[
                        "absolute -bottom-1 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-300",
                        index === 0 ? "bg-[var(--color-gold)]" : "bg-transparent group-hover:bg-[var(--color-gold)]/50"
                    ]}></div>

                    <!-- Светящийся эффект при наведении -->
                    <div class="absolute inset-0 rounded-2xl bg-gradient-to-t from-[var(--color-gold)]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                </button>
            ))}
        </div>
    </div>
</section>

<style>
    @keyframes gradient {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    .animate-gradient {
        background-size: 200% auto;
        animation: gradient 8s ease infinite;
    }
</style>

<script>
    // Фильтрация с анимацией
    const filters = document.querySelectorAll('#case-filters button');

    filters.forEach(filter => {
        filter.addEventListener('click', () => {
            // Сброс активных состояний
            filters.forEach(f => {
                f.classList.remove('bg-gradient-to-br', 'from-[var(--color-gold)]/20', 'to-[var(--color-gold)]/5', 'border-[var(--color-gold)]', 'shadow-lg', 'shadow-[var(--color-gold)]/20');
                f.classList.add('bg-white/[0.03]', 'border-white/10');

                // Сброс иконок
                const iconDiv = f.querySelector('div:first-child');
                iconDiv?.classList.remove('bg-[var(--color-gold)]', 'text-[var(--color-navy)]');
                iconDiv?.classList.add('bg-white/10', 'text-[var(--color-gold)]');

                // Сброс чисел
                const countSpan = f.querySelector('span:nth-child(2)');
                countSpan?.classList.remove('text-white');
                countSpan?.classList.add('text-white', 'group-hover:text-[var(--color-gold)]');

                // Сброс индикатора
                const indicator = f.querySelector('div:last-child');
                indicator?.classList.remove('bg-[var(--color-gold)]');
                indicator?.classList.add('bg-transparent', 'group-hover:bg-[var(--color-gold)]/50');
            });

            // Установка активного состояния
            filter.classList.remove('bg-white/[0.03]', 'border-white/10');
            filter.classList.add('bg-gradient-to-br', 'from-[var(--color-gold)]/20', 'to-[var(--color-gold)]/5', 'border-[var(--color-gold)]', 'shadow-lg', 'shadow-[var(--color-gold)]/20');

            const activeIcon = filter.querySelector('div:first-child');
            activeIcon?.classList.remove('bg-white/10', 'text-[var(--color-gold)]');
            activeIcon?.classList.add('bg-[var(--color-gold)]', 'text-[var(--color-navy)]');

            const activeCount = filter.querySelector('span:nth-child(2)');
            activeCount?.classList.remove('group-hover:text-[var(--color-gold)]');
            activeCount?.classList.add('text-white');

            const activeIndicator = filter.querySelector('div:last-child');
            activeIndicator?.classList.remove('bg-transparent', 'group-hover:bg-[var(--color-gold)]/50');
            activeIndicator?.classList.add('bg-[var(--color-gold)]');
        });
    });
</script>
