---
const advantages = [
  {
    value: "500+",
    label: "Дел в арбитраже",
    description: "Успешно проведённых дел в арбитражных судах всех инстанций"
  },
  {
    value: "92%",
    label: "Успешных решений",
    description: "Клиенты получили благоприятный исход дела"
  },
  {
    value: "₽500М+",
    label: "Взыскано",
    description: "Реально взысканных средств для клиентов за последние 5 лет"
  },
  {
    value: "15+",
    label: "Лет практики",
    description: "Специализируюсь исключительно на арбитражных спорах"
  },
  {
    value: "24/7",
    label: "На связи",
    description: "Оперативное информирование клиентов о ходе дела"
  },
  {
    value: "0₽",
    label: "Первичный анализ",
    description: "Бесплатная оценка перспектив дела и консультация"
  }
];
---

<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-[var(--color-gold)]/30 to-transparent"></div>
  
  <!-- Фоновые элементы -->
  <div class="absolute top-[25%] right-[5%] w-[400px] h-[400px] bg-[var(--color-gold)]/3 rounded-full blur-[120px]"></div>
  <div class="absolute bottom-[25%] left-[5%] w-[350px] h-[350px] bg-[var(--color-blue-primary)]/3 rounded-full blur-[100px]"></div>

  <!-- Сетка на фоне -->
  <div 
    class="absolute inset-0 opacity-[0.02]"
    style="background-image: linear-gradient(var(--color-gold) 1px, transparent 1px), linear-gradient(90deg, var(--color-gold) 1px, transparent 1px); background-size: 60px 60px;"
  ></div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
    <!-- Заголовок секции -->
    <div class="text-center mb-16">
      <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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
      {advantages.map((item) => (
        <div class="group relative bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/10 p-8 rounded-xl hover:border-[var(--color-gold)]/30 transition-all duration-500 hover:-translate-y-1">
          <!-- Декоративный уголок -->
          <div class="absolute top-0 right-0 w-0 h-0 border-t-2 border-r-2 border-[var(--color-gold)] group-hover:w-8 group-hover:h-8 transition-all duration-500"></div>
          
          <!-- Значение -->
          <div class="text-4xl md:text-5xl font-black text-[var(--color-gold)] mb-3 group-hover:scale-110 transition-transform origin-left">
            {item.value}
          </div>

          <!-- Метка -->
          <div class="text-[var(--color-white)] font-bold text-sm uppercase tracking-wider mb-4">
            {item.label}
          </div>

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

    <!-- Декоративная полоса снизу -->
    <div class="mt-16 flex items-center justify-center gap-4">
      <div class="h-px w-16 bg-gradient-to-r from-transparent to-[var(--color-gold)]/50"></div>
      <div class="flex items-center gap-2 text-[var(--color-gray-500)] text-sm">
        <span class="w-2 h-2 bg-[var(--color-gold)] rotate-45"></span>
        <span>Работаю на результат с 2009 года</span>
        <span class="w-2 h-2 bg-[var(--color-gold)] rotate-45"></span>
      </div>
      <div class="h-px w-16 bg-gradient-to-l from-transparent to-[var(--color-gold)]/50"></div>
    </div>
  </div>
</section>
