---
const steps = [
    {
        number: "01",
        title: "Вызов на место ДТП",
        description: "Приезжаем в течение 20 минут. Фиксируем следы торможения, повреждения, позиции авто.",
        icon: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
    },
    {
        number: "02",
        title: "Сбор доказательств",
        description: "Фото, видео с регистраторов, показания свидетелей. Проверяем оформление сотрудниками ГИБДД.",
        icon: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
    },
    {
        number: "03",
        title: "Экспертиза",
        description: "Назначаем независимую техническую экспертизу для установления причин и механизма ДТП.",
        icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
    },
    {
        number: "04",
        title: "Защита в суде",
        description: "Представление ваших интересов в суде. Доказывание невиновности или смягчение ответственности.",
        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"
    }
];
---

<section class="py-24 bg-[var(--color-navy)] relative overflow-hidden">
    <!-- Фоновая "дорога" -->
    <div class="absolute inset-0 flex items-center justify-center opacity-10">
        <div class="w-full max-w-4xl h-32 relative">
            <!-- Асфальт -->
            <div class="absolute inset-0 bg-gray-700 rounded-full blur-3xl"></div>
            <!-- Разметка -->
            <div class="absolute top-1/2 left-0 right-0 h-1 flex items-center justify-between px-20">
                {[...Array(8)].map(() => (
                        <div class="w-12 h-1 bg-[var(--color-gold)]"></div>
                ))}
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
        <div class="text-center mb-20">
            <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
                Как мы работаем при <span class="text-[var(--color-gold)]">ДТП</span>
            </h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
                Четкий алгоритм действий с первой минуты после аварии до вынесения решения суда
            </p>
        </div>

        <div class="relative">
            <!-- Линия соединяющая шаги (для десктопа) -->
            <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent transform -translate-y-1/2"></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="bg-white/5 backdrop-blur border border-white/10 rounded-2xl p-8 h-full hover:bg-white/10 hover:border-[var(--color-gold)]/30 transition-all duration-300 relative z-10">
                                <!-- Номер -->
                                <div class="absolute -top-4 -right-4 w-12 h-12 bg-[var(--color-gold)] rounded-full flex items-center justify-center text-[var(--color-navy)] font-black text-lg shadow-lg group-hover:scale-110 transition-transform">
                                    {step.number}
                                </div>

                                <!-- Иконка -->
                                <div class="w-16 h-16 bg-white/5 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-[var(--color-gold)]/20 transition-colors">
                                    <svg class="w-8 h-8 text-[var(--color-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d={step.icon}/>
                                    </svg>
                                </div>

                                <h3 class="text-xl font-bold text-white mb-3">{step.title}</h3>
                                <p class="text-gray-400 text-sm leading-relaxed">{step.description}</p>
                            </div>

                            <!-- Стрелка соединитель (кроме последней) -->
                            {index < steps.length - 1 && (
                                    <div class="hidden lg:flex absolute top-1/2 -right-4 transform -translate-y-1/2 translate-x-full z-20 text-[var(--color-gold)]">
                                        <svg class="w-8 h-8 animate-pulse" 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>
