---
const steps = [
  {
    number: "01",
    title: "Консультация",
    description: "Анализирую вашу ситуацию, изучаю документы, оцениваю перспективы дела",
    details: "Бесплатно • 30-60 минут"
  },
  {
    number: "02",
    title: "Договор",
    description: "Заключаем договор на оказание юридических услуг, согласуем стратегию",
    details: "Прозрачные условия • Фиксированная цена"
  },
  {
    number: "03",
    title: "Работа по делу",
    description: "Готовлю документы, представляю ваши интересы в арбитражном суде",
    details: "Все инстанции • Полное сопровождение"
  },
  {
    number: "04",
    title: "Результат",
    description: "Получаем решение суда, контролируем исполнение",
    details: "Исполнительный лист • Взыскание средств"
  }
];
---

<section class="py-24 bg-[var(--color-navy-dark)] relative overflow-hidden">
  <!-- Декоративные элементы -->
  <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/30 to-transparent"></div>
  <div class="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/30 to-transparent"></div>
  
  <!-- Фоновые элементы -->
  <div class="absolute top-[15%] left-[15%] w-[350px] h-[350px] bg-[var(--color-gold)]/3 rounded-full blur-[100px]"></div>
  <div class="absolute bottom-[15%] right-[15%] w-[300px] h-[300px] bg-[var(--color-blue-primary)]/3 rounded-full blur-[80px]"></div>

  <!-- Горизонтальная линия прогресса (desktop) -->
  <div class="hidden lg:block absolute top-1/2 left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/30 to-transparent"></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-block px-4 py-2 bg-[var(--color-gold)]/5 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-[0.2em] mb-6">
        Процесс работы
      </span>
      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-white)] mb-6">
        КАК<br />
        <span class="text-[var(--color-gold)]">РАБОТАЮ</span>
      </h2>
      <p class="text-[var(--color-gray-500)] text-lg max-w-2xl mx-auto">
        Простой и понятный процесс взаимодействия
      </p>
    </div>

    <!-- Шаги (горизонтально на desktop) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      {steps.map((step, index) => (
        <div class="relative group">
          <!-- Соединительная линия (desktop) -->
          {index < steps.length - 1 && (
            <div class="hidden lg:block absolute top-12 left-[60%] w-[80%] h-px bg-gradient-to-r from-[var(--color-gold)]/30 to-transparent"></div>
          )}

          <!-- Карточка шага -->
          <div class="relative bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 p-8 rounded-xl hover:border-[var(--color-gold)]/30 transition-all duration-500 group-hover:-translate-y-2">
            <!-- Номер шага -->
            <div class="relative mb-8">
              <div class="text-6xl md:text-7xl font-black text-[var(--color-gold)]/10 group-hover:text-[var(--color-gold)]/20 transition-colors">
                {step.number}
              </div>
              <div class="absolute bottom-0 left-0 w-12 h-1 bg-[var(--color-gold)]"></div>
            </div>

            <!-- Заголовок -->
            <h3 class="text-xl font-bold 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 leading-relaxed mb-4">
              {step.description}
            </p>

            <!-- Детали -->
            <div class="flex items-center gap-2 text-xs text-[var(--color-gray-600)]">
              <span class="w-1.5 h-1.5 bg-[var(--color-gold)] rounded-full"></span>
              <span>{step.details}</span>
            </div>
          </div>
        </div>
      ))}
    </div>

    <!-- CTA кнопка -->
    <div class="mt-16 text-center">
      <a
        href="#contact"
        class="inline-flex items-center gap-3 px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-lg transition-all hover:shadow-[0_0_30px_rgba(191,155,88,0.4)]"
      >
        <span>Начать работу над делом</span>
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
        </svg>
      </a>
    </div>
  </div>
</section>
