---
const steps = [
  {
    number: "01",
    title: "Аварийная остановка",
    description: "Блокируем звонки, аресты, угрозы. Перекрываем все каналы давления кредиторов.",
    details: ["Запрет звонков", "Приостановка списаний", "Защита имущества"],
    icon: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
  },
  {
    number: "02",
    title: "Разведка боем",
    description: "Анализируем все кредитные договоры на предмет нарушений и возможностей для атаки.",
    details: ["Аудит документов", "Поиск нарушений", "Оценка рисков"],
    icon: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
  },
  {
    number: "03",
    title: "Контратака",
    description: "Оспариваем незаконные условия, требуем списания переплат, готовим встречные иски.",
    details: ["Претензии банку", "Жалобы в ЦБ", "Иски о возврате"],
    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"
  },
  {
    number: "04",
    title: "Тотальная зачистка",
    description: "Процедура банкротства или мировое соглашение с максимальным списанием долга.",
    details: ["Банкротство", "Мировое соглашение", "Списание долга"],
    icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
  }
];
---

<section id="process" class="py-16 md:py-24 bg-[var(--color-navy-dark)] relative overflow-hidden">
  <!-- Фоновая сетка -->
  <div class="absolute inset-0 opacity-[0.02]" style="background-image: radial-gradient(var(--color-gold) 1px, transparent 1px); background-size: 40px 40px;"></div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
    <!-- Заголовок -->
    <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16">
      <span class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider mb-4 md:mb-6">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
        </svg>
        План наступления
      </span>
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-[var(--color-white)] mb-4 md:mb-6">
        От обороны к <span class="text-[var(--color-gold)]">победе</span>
      </h2>
      <p class="text-[var(--color-gray-500)] text-base md:text-lg">
        Четкий алгоритм действий для полной зачистки долгового бремени
      </p>
    </div>

    <!-- Горизонтальная линия процесса (только десктоп) -->
    <div class="hidden lg:block relative mb-12">
      <div class="absolute top-1/2 left-0 right-0 h-1 bg-[var(--color-gray-600)]/20 -translate-y-1/2 rounded-full">
        <div class="h-full bg-gradient-to-r from-[var(--color-gold)] via-[var(--color-gold)] to-[var(--color-gold)]/30 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <!-- Сетка шагов -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
      {steps.map((step, index) => (
        <div class="relative group">
          <!-- Номер шага (мобильный сверху, десктоп скрыт - используем точки) -->
          <div class="lg:hidden flex items-center gap-3 mb-4">
            <div class="w-12 h-12 rounded-full bg-[var(--color-gold)] flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/30">
              <span class="text-[var(--color-navy)] font-black text-lg">{step.number}</span>
            </div>
            <div class="flex-1 h-px bg-[var(--color-gray-600)]/20"></div>
          </div>

          <!-- Точка на линии (только десктоп) -->
          <div class="hidden lg:flex absolute -top-6 left-1/2 -translate-x-1/2 z-10">
            <div class="w-10 h-10 rounded-full bg-[var(--color-navy)] border-4 border-[var(--color-gold)] flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/20 group-hover:scale-125 transition-transform">
              <span class="text-[var(--color-gold)] font-bold text-sm">{step.number}</span>
            </div>
          </div>

          <!-- Карточка -->
          <div class="bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-2xl p-6 hover:border-[var(--color-gold)]/30 transition-all duration-500 hover:-translate-y-2 hover:shadow-xl hover:shadow-[var(--color-gold)]/5 lg:mt-8 h-full flex flex-col">
            
            <!-- Иконка -->
            <div class="w-14 h-14 rounded-xl bg-[var(--color-gold)]/10 flex items-center justify-center mb-5 group-hover:bg-[var(--color-gold)] transition-colors">
              <svg class="w-7 h-7 text-[var(--color-gold)] group-hover:text-[var(--color-navy)] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={step.icon}></path>
              </svg>
            </div>

            <!-- Контент -->
            <h3 class="text-lg md:text-xl font-black text-[var(--color-white)] mb-3 group-hover:text-[var(--color-gold)] transition-colors">
              {step.title}
            </h3>
            
            <p class="text-[var(--color-gray-500)] text-sm mb-4 flex-grow">
              {step.description}
            </p>

            <!-- Детали -->
            <ul class="space-y-2">
              {step.details.map((detail) => (
                <li class="flex items-center gap-2 text-xs text-[var(--color-gray-400)]">
                  <svg class="w-3 h-3 text-[var(--color-gold)] flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                  </svg>
                  {detail}
                </li>
              ))}
            </ul>

            <!-- Прогресс -->
            <div class="mt-4 pt-4 border-t border-[var(--color-gray-600)]/10">
              <div class="flex items-center justify-between text-xs">
                <span class="text-[var(--color-gray-500)]">Этап</span>
                <span class="text-[var(--color-gold)] font-bold">{((index + 1) * 25)}%</span>
              </div>
              <div class="mt-2 h-1 bg-[var(--color-gray-600)]/20 rounded-full overflow-hidden">
                <div class="h-full bg-[var(--color-gold)] rounded-full" style={`width: ${(index + 1) * 25}%`}></div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>

    <!-- Итоговая статистика -->
    <div class="mt-12 md:mt-16 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
      <div class="text-center p-4 md:p-6 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-2xl">
        <div class="text-2xl md:text-3xl font-black text-[var(--color-gold)] mb-1">3-6 месяцев</div>
        <div class="text-xs md:text-sm text-[var(--color-gray-500)]">Средний срок дела</div>
      </div>
      <div class="text-center p-4 md:p-6 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-2xl">
        <div class="text-2xl md:text-3xl font-black text-[var(--color-gold)] mb-1">85%</div>
        <div class="text-xs md:text-sm text-[var(--color-gray-500)]">Списываем долга</div>
      </div>
      <div class="text-center p-4 md:p-6 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-2xl">
        <div class="text-2xl md:text-3xl font-black text-[var(--color-gold)] mb-1">0 ₽</div>
        <div class="text-xs md:text-sm text-[var(--color-gray-500)]">Первый звонок</div>
      </div>
      <div class="text-center p-4 md:p-6 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-2xl">
        <div class="text-2xl md:text-3xl font-black text-[var(--color-gold)] mb-1">100%</div>
        <div class="text-xs md:text-sm text-[var(--color-gray-500)]">Конфиденциально</div>
      </div>
    </div>
  </div>
</section>