---
const steps = [
    {
        number: "01",
        title: "Консультация",
        description: "Бесплатный анализ ситуации, изучение документов, оценка перспектив дела и разработка стратегии защиты.",
        icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>`
    },
    {
        number: "02",
        title: "Сбор доказательств",
        description: "Запрос материалов дела, выявление процессуальных нарушений, подготовка доказательной базы для защиты.",
        icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/></svg>`
    },
    {
        number: "03",
        title: "Подготовка жалобы",
        description: "Составление юридически грамотной жалобы с указанием всех нарушений закона и процессуальных ошибок.",
        icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>`
    },
    {
        number: "04",
        title: "Защита в суде",
        description: "Профессиональное представление интересов в судебных заседаниях. Добиваемся отмены или смягчения наказания.",
        icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/></svg>`
    }
];
---

<section id="process" class="py-24 bg-[var(--color-navy)] relative overflow-hidden">
    <!-- Фоновая сетка -->
    <div class="absolute inset-0 opacity-[0.02]" style="background-image: linear-gradient(rgba(191,155,88,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(191,155,88,.3) 1px, transparent 1px); background-size: 50px 50px;"></div>
    
    <!-- Градиентные шары -->
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-[0.03] rounded-full blur-[100px]"></div>
    <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-[100px]"></div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
        <!-- Заголовок -->
        <div class="text-center mb-20">
            <span class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider mb-6">
                Алгоритм
            </span>
            <h2 class="text-4xl md:text-5xl font-bold text-[var(--color-white)] mb-6">
                Как мы <span class="text-[var(--color-gold)]">работаем</span>
            </h2>
            <p class="text-[var(--color-gray-500)] max-w-2xl mx-auto text-lg">
                Четкий план действий от первичной консультации до положительного решения суда
            </p>
        </div>

        <!-- Процесс -->
        <div class="relative">
            <!-- Линия соединения (десктоп) -->
            <div class="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-[1px] bg-gradient-to-r from-transparent via-[var(--color-gold)]/20 to-transparent"></div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                {steps.map((step, index) => (
                    <div class="relative group">
                        <!-- Карточка -->
                        <div class="relative bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/10 rounded-2xl p-8 hover:border-[var(--color-gold)]/30 transition-all duration-500 h-full flex flex-col items-center text-center md:items-start md:text-left">
                            <!-- Номер — скрыт на мобильных, виден на md и выше -->
                            <div class="hidden md:flex absolute -top-4 -right-4 w-12 h-12 bg-[var(--color-gold)] rounded-xl items-center justify-center text-[var(--color-navy)] font-black text-lg shadow-lg transform group-hover:scale-110 transition-transform duration-300">
                                {step.number}
                            </div>

                            <!-- Иконка -->
                            <div class="w-14 h-14 rounded-2xl bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 flex items-center justify-center mb-6 text-[var(--color-gold)] group-hover:bg-[var(--color-gold)] group-hover:text-[var(--color-white)] transition-all duration-300">
                                <Fragment set:html={step.icon} />
                            </div>

                            <h3 class="text-xl font-bold text-[var(--color-white)] mb-3">{step.title}</h3>
                            <p class="text-[var(--color-gray-500)] text-sm leading-relaxed">{step.description}</p>

                            <!-- Прогресс бар -->
                            <div class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/10 w-full">
                                <div class="flex items-center gap-2 justify-center md:justify-start">
                                    <div class="flex-1 h-1 bg-[var(--color-gray-600)]/20 rounded-full overflow-hidden max-w-[120px] md:max-w-none">
                                        <div class="h-full bg-[var(--color-gold)] rounded-full transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-700 delay-100" style="width: 100%"></div>
                                    </div>
                                    <span class="text-xs text-[var(--color-gray-600)] font-mono">{((index + 1) * 25)}%</span>
                                </div>
                            </div>
                        </div>

                        <!-- Стрелка -->
                        {index < steps.length - 1 && (
                            <div class="hidden lg:flex absolute top-24 -right-4 transform translate-x-1/2 text-[var(--color-gold)]/20 group-hover:text-[var(--color-gold)]/40 transition-colors">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                </svg>
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </div>
    </div>
</section>
