---
const instances = [
  {
    level: "Первая инстанция",
    court: "Арбитражный суд Ханты-Мансийского автономного округа — Югры",
    description: "Рассмотрение дела по существу, сбор и представление доказательств",
    icon: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
  },
  {
    level: "Апелляция",
    court: "Восьмой арбитражный апелляционный суд",
    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 2"
  },
  {
    level: "Кассация",
    court: "Арбитражный суд Уральского округа",
    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"
  },
  {
    level: "Высшая инстанция",
    court: "Верховный Суд Российской Федерации",
    description: "Пересмотр судебных актов в порядке надзора, обеспечение единообразия практики",
    icon: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
  }
];
---

<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-[20%] left-[10%] w-[400px] h-[400px] bg-[var(--color-gold)]/3 rounded-full blur-[120px]"></div>
  <div class="absolute bottom-[20%] right-[10%] w-[350px] h-[350px] bg-[var(--color-blue-primary)]/3 rounded-full blur-[100px]"></div>

  <!-- Вертикальная линия -->
  <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="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>

    <!-- Список инстанций -->
    <div class="space-y-6 lg:space-y-0">
      {instances.map((instance, index) => (
        <div class={`relative lg:grid lg:grid-cols-2 lg:gap-16 ${index % 2 === 0 ? '' : 'lg:direction-reverse'}`}>
          <!-- Левая/Правая часть в зависимости от индекса -->
          <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 lg:text-left'}`}>
            <div class="group 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">
              <!-- Уровень и иконка -->
              <div class={`flex items-center gap-4 mb-6 ${index % 2 === 0 ? 'lg:justify-end' : 'lg:justify-start'}`}>
                <div class="w-12 h-12 bg-[var(--color-gold)]/5 rounded-lg flex items-center justify-center flex-shrink-0">
                  <svg class="w-6 h-6 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={instance.icon} />
                  </svg>
                </div>
                <div>
                  <div class="text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider">{instance.level}</div>
                </div>
              </div>

              <!-- Название суда -->
              <h3 class="text-xl md:text-2xl font-bold text-[var(--color-white)] mb-4 group-hover:text-[var(--color-gold)] transition-colors">
                {instance.court}
              </h3>

              <!-- Описание -->
              <p class="text-[var(--color-gray-500)] leading-relaxed">
                {instance.description}
              </p>
            </div>
          </div>

          <!-- Точка на линии (только для десктопа) -->
          <div class="hidden lg:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
            <div class="w-4 h-4 rounded-full bg-[var(--color-navy)] border-2 border-[var(--color-gold)]"></div>
          </div>

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

    <!-- Декоративная плашка снизу -->
    <div class="mt-16 text-center">
      <div class="inline-flex items-center gap-3 px-6 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-full">
        <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
        <span class="text-[var(--color-gray-400)] text-sm">Работаю по всему Уральскому арбитражному округу</span>
      </div>
    </div>
  </div>
</section>
