---
const specializations = [
  {
    title: "Уголовное право",
    description: "Защита по уголовным делам, досудебное урегулирование, представительство в судах всех инстанций",
    icon: "scale"
  },
  {
    title: "Гражданское право",
    description: "Споры по договорам, имущественные споры, наследственные дела, жилищные вопросы",
    icon: "building"
  },
  {
    title: "Административное право",
    description: "Обжалование постановлений, защита прав водителей, дела об административных правонарушениях",
    icon: "clipboard"
  },
  {
    title: "Семейное право",
    description: "Разводы, раздел имущества, споры о детях, алименты",
    icon: "users"
  },
  {
    title: "Жилищное право",
    description: "Приватизация, переселение, незаконная перепланировка, выселение",
    icon: "home"
  },
  {
    title: "Земельное право",
    description: "Оформление земельных участков, споры о границах, изъятие земли",
    icon: "territory"
  }
];

const iconPaths: Record<string, string> = {
  scale: "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",
  building: "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",
  clipboard: "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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01",
  users: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z",
  home: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
  territory: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
};
---

<section class="relative py-20 bg-[#F8F9FA] overflow-hidden -mx-4 md:mx-0">
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute bottom-0 left-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl"></div>
  </div>

  <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10">
    <div class="text-center mb-16">
            <span class="inline-block px-4 py-2 bg-[var(--color-blue-primary)]/10 text-[var(--color-blue-primary)] text-sm font-bold uppercase tracking-wider rounded-full mb-4">
                Экспертиза
            </span>
      <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
        Мои <span class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-blue-primary)] to-blue-600">специализации</span>
      </h2>
      <div class="w-24 h-1.5 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] mx-auto rounded-full"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {specializations.map((item, index) => (
          <div class="group bg-white/80 backdrop-blur-xl p-8 rounded-2xl shadow-lg border border-white/50 hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 hover:-translate-y-2 transition-all duration-500 relative overflow-hidden">
            <!-- Декоративный фон при hover -->
            <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-blue-primary)]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

            <div class="relative z-10">
              <!-- Иконка -->
              <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-blue-primary)] to-blue-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-blue-500/30 group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[item.icon]}/>
                </svg>
              </div>

              <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-[var(--color-blue-primary)] transition-colors">
                {item.title}
              </h3>

              <p class="text-gray-600 leading-relaxed text-sm">
                {item.description}
              </p>

              <!-- Стрелка при hover -->
              <div class="mt-6 flex items-center text-[var(--color-blue-primary)] font-semibold text-sm opacity-0 transform translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
                Подробнее
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
              </div>
            </div>
          </div>
      ))}
    </div>
  </div>
</section>