---
const steps = [
  {
    phase: "Этап 1",
    title: "Анализ ситуации",
    description: "Изучение документов, правовой анализ, оценка перспектив спора в арбитражном суде",
    details: ["Аудит документов", "Анализ судебной практики", "Оценка рисков"],
    duration: "1-3 дня"
  },
  {
    phase: "Этап 2",
    title: "Досудебная работа",
    description: "Обязательное соблюдение претензионного порядка, переговоры, подготовка позиции",
    details: ["Претензионное письмо", "Сбор доказательств", "Расчёт требований"],
    duration: "1-4 недели"
  },
  {
    phase: "Этап 3",
    title: "Первая инстанция",
    description: "Подача искового заявления, участие в судебных заседаниях, представление доказательств",
    details: ["Исковое заявление", "Ходатайства", "Судебные заседания"],
    duration: "2-6 месяцев"
  },
  {
    phase: "Этап 4",
    title: "Апелляция и кассация",
    description: "Обжалование решения, защита позиции в вышестоящих инстанциях",
    details: ["Апелляционная жалоба", "Кассационная жалоба", "Защита в суде"],
    duration: "2-4 месяца"
  },
  {
    phase: "Этап 5",
    title: "Исполнение решения",
    description: "Получение исполнительного листа, контроль исполнения решения суда",
    details: ["Исполнительный лист", "Банк или ФССП", "Контроль взыскания"],
    duration: "1-6 месяцев"
  }
];
---

<section id="process" class="py-24 bg-[var(--color-navy)] relative overflow-hidden">
  <!-- Вертикальная линия по центру -->
  <div class="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[var(--color-gold)]/20 to-transparent hidden lg:block"></div>

  <!-- Декоративные элементы -->
  <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-[var(--color-gold)]/5 rounded-full blur-3xl"></div>
  <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-[var(--color-blue-primary)]/5 rounded-full blur-3xl"></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-20">
      <span class="inline-block 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-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)] text-lg">
        Пошаговый алгоритм ведения арбитражного дела от консультации до исполнения решения суда
      </p>
    </div>

    <!-- Временная линия -->
    <div class="space-y-12 lg:space-y-0">
      {steps.map((step, index) => (
        <div class={`relative lg:grid lg:grid-cols-2 lg:gap-16 ${index !== steps.length - 1 ? 'lg:pb-16' : ''}`}>
          <!-- Точка на линии -->
          <div class="hidden lg:flex absolute left-1/2 top-0 -translate-x-1/2 z-10">
            <div class="w-12 h-12 rounded-full bg-[var(--color-navy)] border-4 border-[var(--color-gold)] flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/20">
              <span class="text-[var(--color-gold)] font-bold text-sm">{index + 1}</span>
            </div>
          </div>

          <!-- Контент слева/справа -->
          <div class={`lg:pr-16 ${index % 2 === 0 ? 'lg:text-right lg:col-start-1' : 'lg:col-start-2 lg:pl-16 lg:pr-0'}`}>
            <div class="group 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 hover:-translate-y-1 text-center lg:text-left">
              <!-- Верхняя строка: фаза и длительность -->
              <div class={`flex items-center justify-between mb-4 ${index % 2 === 0 ? 'lg:justify-end' : 'lg:justify-start'}`}>
                <span class="text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider">{step.phase}</span>
                <span class="px-3 py-1 bg-[var(--color-gold)]/10 rounded-full text-[var(--color-gold)] text-xs">{step.duration}</span>
              </div>

              <h3 class="text-2xl 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)] mb-6 leading-relaxed">
                {step.description}
              </p>

              <!-- Детали - центрируем контейнер, но текст по левому краю -->
              <div class="flex justify-center lg:block">
                <ul class="inline-block text-left space-y-2">
                  {step.details.map((detail) => (
                    <li class={`flex items-center gap-2 text-sm text-[var(--color-gray-400)] ${index % 2 === 0 ? 'lg:flex-row-reverse lg:text-right' : ''}`}>
                      <svg class="w-4 h-4 text-[var(--color-gold)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                      </svg>
                      <span>{detail}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          <!-- Пустая колонка для сетки -->
          {index % 2 === 0 ? <div class="hidden lg:block"></div> : <div class="hidden lg:block lg:col-start-1 lg:row-start-1"></div>}
        </div>
      ))}
    </div>
  </div>
</section>