---
const services = [
  {
    title: "Защита подозреваемого",
    description: "На стадии задержания и предъявления обвинения",
    features: [
      "Выезд в СИЗО/ИВС 24/7",
      "Присутствие при допросе",
      "Подача ходатайств",
      "Избрание меры пресечения"
    ],
    icon: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
  },
  {
    title: "Защита обвиняемого",
    description: "На предварительном следствии и в суде",
    features: [
      "Изучение материалов дела",
      "Участие в следственных действиях",
      "Представление доказательств",
      "Допрос свидетелей"
    ],
    icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
  },
  {
    title: "Потерпевший",
    description: "Представительство интересов потерпевшего",
    features: [
      "Подача заявления",
      "Контроль расследования",
      "Поддержание обвинения в суде",
      "Взыскание ущерба"
    ],
    icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
  },
  {
    title: "Апелляция и кассация",
    description: "Обжалование приговоров и постановлений",
    features: [
      "Анализ приговора",
      "Составление жалобы",
      "Участие в заседании",
      "Новые доказательства"
    ],
    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"
  }
];
---

<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-red-600/30 to-transparent"></div>
  
  <!-- Фоновые элементы -->
  <div class="absolute top-[30%] left-[15%] w-[300px] h-[300px] bg-red-900/10 rounded-full blur-[100px]"></div>
  <div class="absolute bottom-[30%] right-[15%] w-[250px] h-[250px] bg-[var(--color-gold)]/5 rounded-full blur-[80px]"></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-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="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
      {services.map((service, index) => (
        <div class="group relative bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 p-8 rounded-xl hover:border-red-600/30 transition-all duration-500 hover:-translate-y-1">
          <!-- Декоративный элемент -->
          <div class="absolute top-0 right-0 w-20 h-20 overflow-hidden">
            <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-red-600/10 to-transparent transform rotate-45 translate-x-10 -translate-y-10 group-hover:translate-x-8 group-hover:-translate-y-8 transition-transform duration-500"></div>
          </div>

          <!-- Иконка -->
          <div class="w-14 h-14 bg-red-600/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-red-600/20 transition-colors">
            <svg class="w-7 h-7 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d={service.icon} />
            </svg>
          </div>

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

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

          <!-- Список -->
          <ul class="space-y-3">
            {service.features.map((feature) => (
              <li class="flex items-start gap-3 text-sm text-[var(--color-gray-400)]">
                <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>
</section>
