---
const crimes = [
  {
    category: "Экономические",
    items: [
      { name: "Мошенничество (ст. 159)", icon: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" },
      { name: "Присвоение (ст. 160)", icon: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" },
      { name: "Незаконное предпринимательство (ст. 171)", 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" }
    ]
  },
  {
    category: "Должностные",
    items: [
      { name: "Взятка (ст. 290, 291)", 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" },
      { name: "Злоупотребление полномочиями (ст. 201)", 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" },
      { name: "Халатность (ст. 293)", icon: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }
    ]
  },
  {
    category: "Против личности",
    items: [
      { name: "Причинение вреда здоровью (ст. 111-118)", icon: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" },
      { name: "Угроза убийством (ст. 119)", icon: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" },
      { name: "Клевета (ст. 128.1)", icon: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }
    ]
  },
  {
    category: "Наркотики",
    items: [
      { name: "Сбыт (ст. 228.1)", icon: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" },
      { name: "Хранение (ст. 228)", icon: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" }
    ]
  },
  {
    category: "Транспортные",
    items: [
      { name: "ДТП с пострадавшими (ст. 264)", icon: "M13 10V3L4 14h7v7l9-11h-7z" },
      { name: "Оставление места ДТП (ст. 265)", icon: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }
    ]
  },
  {
    category: "Против собственности",
    items: [
      { name: "Кража (ст. 158)", icon: "M8 11V7a4 4 0 118 0m-4 8v-1" },
      { name: "Грабёж (ст. 161)", icon: "M13 10V3L4 14h7v7l9-11h-7z" },
      { name: "Разбой (ст. 162)", icon: "M6 18L18 6M6 6l12 12" }
    ]
  }
];
---

<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-[10%] left-[10%] w-[400px] h-[400px] bg-red-900/10 rounded-full blur-[120px]"></div>
  <div class="absolute bottom-[10%] right-[10%] w-[350px] h-[350px] bg-[var(--color-gold)]/5 rounded-full blur-[100px]"></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 lg:grid-cols-3 gap-6">
      {crimes.map((category) => (
        <div class="group relative bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-xl overflow-hidden hover:border-red-600/30 transition-all duration-500">
          <!-- Красная линия сверху -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-600 via-red-500 to-red-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div>
          
          <!-- Заголовок категории -->
          <div class="p-6 border-b border-[var(--color-gray-600)]/20">
            <h3 class="text-xl font-bold text-[var(--color-white)] group-hover:text-red-500 transition-colors">
              {category.category}
            </h3>
          </div>

          <!-- Список статей -->
          <div class="p-6 space-y-4">
            {category.items.map((item) => (
              <div class="flex items-start gap-3 group/item">
                <div class="w-8 h-8 bg-red-600/5 rounded-lg flex items-center justify-center flex-shrink-0 group-hover/item:bg-red-600/10 transition-colors">
                  <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d={item.icon} />
                  </svg>
                </div>
                <span class="text-[var(--color-gray-400)] text-sm group-hover/item:text-[var(--color-white)] transition-colors">
                  {item.name}
                </span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>

    <!-- Примечание -->
    <div class="mt-12 text-center">
      <p class="text-[var(--color-gray-500)] text-sm">
        * Это не полный перечень. Работаю со всеми категориями уголовных дел
      </p>
    </div>
  </div>
</section>
