---
const stages = [
  {
    number: "01",
    title: "Доследственная проверка",
    description: "Проверка сообщения о преступлении, сбор материалов, опрос свидетелей",
    duration: "3-30 дней",
    risks: "Возбуждение уголовного дела",
    actions: ["Дача объяснений", "Представление документов", "Ходатайства"]
  },
  {
    number: "02",
    title: "Предварительное следствие",
    description: "Сбор доказательств, допросы, экспертизы, следственные действия",
    duration: "2-12 месяцев",
    risks: "Избрание меры пресечения, обвинение",
    actions: ["Участие в допросах", "Заявления ходатайств", "Ознакомление с материалами"]
  },
  {
    number: "03",
    title: "Суд первой инстанции",
    description: "Рассмотрение дела по существу, исследование доказательств, прения",
    duration: "2-6 месяцев",
    risks: "Обвинительный приговор",
    actions: ["Позиция защиты", "Допрос свидетелей", "Представление доказательств"]
  },
  {
    number: "04",
    title: "Апелляция",
    description: "Проверка законности приговора, не вступившего в законную силу",
    duration: "1-3 месяца",
    risks: "Оставление приговора без изменений",
    actions: ["Апелляционная жалоба", "Участие в заседании", "Новые доказательства"]
  },
  {
    number: "05",
    title: "Кассация и надзор",
    description: "Проверка вступивших в силу судебных актов вышестоящими судами",
    duration: "1-6 месяцев",
    risks: "Отказ в передаче жалобы",
    actions: ["Кассационная жалоба", "Надзорная жалоба", "Европейский суд"]
  }
];
---

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

  <!-- Вертикальная линия -->
  <div class="absolute left-8 md:left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-red-600/50 via-red-600/30 to-transparent hidden md:block"></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-red-600/10 border border-red-600/20 rounded-full text-red-500 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-red-500">ДЕЛА</span>
      </h2>
      <p class="text-[var(--color-gray-500)] text-lg max-w-2xl mx-auto">
        Защита на каждом этапе уголовного судопроизводства
      </p>
    </div>

    <!-- Вертикальный таймлайн -->
    <div class="space-y-8 md:space-y-0">
      {stages.map((stage, index) => (
        <div class={`relative md:grid md:grid-cols-2 md:gap-16 ${index % 2 === 0 ? '' : 'md:direction-reverse'}`}>
          <!-- Точка на линии -->
          <div class="hidden md:flex absolute left-1/2 top-8 -translate-x-1/2 z-10">
            <div class="w-6 h-6 rounded-full bg-[var(--color-navy)] border-2 border-red-600 flex items-center justify-center">
              <span class="text-red-500 text-xs font-bold">{index + 1}</span>
            </div>
          </div>

          <!-- Контент -->
          <div class={`md:pr-16 ${index % 2 === 0 ? 'md:text-right md:col-start-1' : 'md:col-start-2 md:pl-16 md:pr-0 md:text-left'}`}>
            <div class="group ml-16 md:ml-0 bg-[var(--color-navy-dark)] border-l-2 md:border-l-0 md:border border-red-600/20 hover:border-red-600/50 transition-all p-6 rounded-xl">
              <!-- Номер для мобильных -->
              <div class="md:hidden flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-red-600/10 flex items-center justify-center">
                  <span class="text-red-500 font-bold text-lg">{stage.number}</span>
                </div>
                <span class="text-red-500 text-xs font-bold uppercase tracking-wider">{stage.duration}</span>
              </div>

              <!-- Заголовок -->
              <h3 class="text-xl font-bold text-[var(--color-white)] mb-2 group-hover:text-red-500 transition-colors">
                {stage.title}
              </h3>

              <!-- Описание -->
              <p class="text-[var(--color-gray-500)] text-sm mb-4">
                {stage.description}
              </p>

              <!-- Длительность (desktop) -->
              <div class={`hidden md:flex items-center gap-2 mb-4 ${index % 2 === 0 ? 'md:justify-end' : 'md:justify-start'}`}>
                <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="text-red-500 text-xs font-bold">{stage.duration}</span>
              </div>

              <!-- Риски -->
              <div class="mb-4 p-3 bg-red-600/10 border border-red-600/20">
                <div class="flex items-center gap-2 mb-1">
                  <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                  </svg>
                  <span class="text-red-500 text-xs font-bold uppercase">Риски</span>
                </div>
                <p class="text-[var(--color-gray-400)] text-sm">{stage.risks}</p>
              </div>

              <!-- Действия -->
              <div class={`flex flex-wrap gap-2 ${index % 2 === 0 ? 'md:justify-end' : 'md:justify-start'}`}>
                {stage.actions.map((action) => (
                  <span class="px-3 py-1 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 text-[var(--color-gold)] text-xs rounded-full">
                    {action}
                  </span>
                ))}
              </div>
            </div>
          </div>

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

    <!-- CTA -->
    <div class="mt-16 text-center">
      <div class="inline-flex items-center gap-3 px-6 py-4 bg-red-600/10 border border-red-600/20">
        <svg class="w-5 h-5 text-red-500 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
          <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
        </svg>
        <span class="text-[var(--color-gray-400)] text-sm">
          Защита возможна на любой стадии — <span class="text-red-500 font-bold">чем раньше, тем лучше</span>
        </span>
      </div>
    </div>
  </div>
</section>
