---
import { CONTACT_CONSTANTS } from "@constants/constants.ts";

interface Props {
  title?: string;
  subtitle?: string;
}

const {
  title = "Уголовные дела",
  subtitle = "Защита по уголовным делам на любой стадии процесса. От задержания до Верховного суда. Выезд в СИЗО 24/7.",
} = Astro.props;

const stats = [
  { value: "300+", label: "Уголовных дел" },
  { value: "85%", label: "Оправдательных приговоров" },
  { value: "12+", label: "Лет практики" },
  { value: "24/7", label: "Выезд в СИЗО" },
];
---

<section class="relative min-h-screen flex items-center bg-[var(--color-navy)] overflow-hidden">
  <!-- Фоновая сетка -->
  <div class="absolute inset-0 z-0">
    <div 
      class="absolute inset-0 opacity-[0.02]"
      style="background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--color-gold) 2px, transparent 3px), repeating-linear-gradient(90deg, transparent, transparent 2px, var(--color-gold) 2px, transparent 3px); background-size: 100px 100px;"
    ></div>
    
    <!-- Градиентные пятна с красным акцентом -->
    <div class="absolute top-0 right-0 w-[700px] h-[700px] bg-gradient-to-bl from-red-900/20 to-transparent rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-gradient-to-tr from-[var(--color-gold)]/10 to-transparent rounded-full blur-3xl"></div>
  </div>

  <!-- Вертикальные линии -->
  <div class="absolute inset-0 z-0 pointer-events-none overflow-hidden">
    <div class="absolute top-0 left-[20%] w-px h-full bg-gradient-to-b from-transparent via-red-600/20 to-transparent"></div>
    <div class="absolute top-0 right-[30%] w-px h-full bg-gradient-to-b from-transparent via-[var(--color-gold)]/15 to-transparent"></div>
    <div class="absolute top-0 left-[50%] w-px h-full bg-gradient-to-b from-transparent via-red-600/10 to-transparent"></div>
  </div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 py-20">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      
      <!-- Левая часть - контент -->
      <div class="lg:col-span-8">
        <!-- Бейдж с красным акцентом -->
        <div class="inline-flex items-center gap-3 mb-8">
          <div class="flex items-center gap-2">
            <span class="w-4 h-4 bg-red-600 rotate-45 animate-pulse"></span>
            <span class="w-2 h-2 bg-red-600/60 rotate-45"></span>
          </div>
          <span class="text-red-500 text-xs font-bold uppercase tracking-[0.3em] ml-4">
            Уголовная защита
          </span>
        </div>

        <!-- Заголовок -->
        <h1 class="text-5xl md:text-7xl font-bold text-[var(--color-white)] leading-[1.05] mb-8">
          {
            title
              .split(" ")
              .map((word, i) =>
                i === 0 ? (
                  <span class="block text-red-500 mb-2">{word}</span>
                ) : (
                  <span class="inline-block mr-4">{word}</span>
                ),
              )
          }
        </h1>

        <!-- Описание -->
        <p class="text-[var(--color-gray-400)] text-lg md:text-xl leading-relaxed mb-10 max-w-2xl">
          {subtitle}
        </p>

        <!-- Кнопки -->
        <div class="flex flex-col sm:flex-row gap-4 mb-12">
          <a
            href="tel:+79991234567"
            class="group px-8 py-4 bg-red-600 hover:bg-red-700 text-[var(--color-white)] font-bold rounded-lg transition-all hover:shadow-[0_0_40px_rgba(220,38,38,0.5)] flex items-center justify-center gap-3"
          >
            <svg class="w-5 h-5 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
              <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
            </svg>
            <span>Срочный вызов адвоката</span>
          </a>
          <button
            data-consultation-modal
            class="px-8 py-4 border border-[var(--color-gray-600)]/50 text-[var(--color-white)] font-bold rounded-lg hover:border-red-500/50 hover:bg-red-600/10 transition-all flex items-center justify-center gap-3 cursor-pointer"
          >
            <span>Бесплатная консультация</span>
            <svg class="w-5 h-5" 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"></path>
            </svg>
          </button>
        </div>

        <!-- Статистика в ряд -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 pt-8 border-t border-[var(--color-gray-600)]/20">
          {stats.map((stat) => (
            <div>
              <div class="text-2xl md:text-3xl font-black text-red-500 mb-1">{stat.value}</div>
              <div class="text-xs text-[var(--color-gray-500)] uppercase tracking-wider">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>

      <!-- Правая часть - визуальный элемент -->
      <div class="lg:col-span-4 hidden lg:block">
        <div class="relative">
          <!-- Основная карточка -->
          <div class="relative bg-[var(--color-navy-dark)]/80 backdrop-blur-sm border border-[var(--color-gray-600)]/20 p-8 rounded-2xl">
            <!-- Заголовок карточки -->
            <div class="flex items-center gap-3 mb-6">
              <div class="w-12 h-12 bg-red-600/10 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
              </div>
              <div>
                <div class="text-[var(--color-white)] font-bold text-sm">Экстренная помощь</div>
                <div class="text-[var(--color-gray-500)] text-xs">Круглосуточно</div>
              </div>
            </div>

            <!-- Список услуг -->
            <div class="space-y-4">
              <div class="flex items-center gap-3 py-3 border-b border-[var(--color-gray-600)]/20">
                <div class="w-2 h-2 bg-red-600 rotate-45"></div>
                <span class="text-[var(--color-gray-400)] text-sm">Задержание</span>
              </div>
              <div class="flex items-center gap-3 py-3 border-b border-[var(--color-gray-600)]/20">
                <div class="w-2 h-2 bg-red-600 rotate-45"></div>
                <span class="text-[var(--color-gray-400)] text-sm">Допрос</span>
              </div>
              <div class="flex items-center gap-3 py-3 border-b border-[var(--color-gray-600)]/20">
                <div class="w-2 h-2 bg-red-600 rotate-45"></div>
                <span class="text-[var(--color-gray-400)] text-sm">Обыск</span>
              </div>
              <div class="flex items-center gap-3 py-3">
                <div class="w-2 h-2 bg-red-600 rotate-45"></div>
                <span class="text-[var(--color-gray-400)] text-sm">СИЗО / Домашний арест</span>
              </div>
            </div>

            <!-- Телефон -->
            <div class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/20">
              <a href={CONTACT_CONSTANTS.phoneHref} class="flex items-center justify-between group">
                <div>
                  <div class="text-[var(--color-gray-500)] text-xs mb-1">Телефон доверия</div>
                  <div class="text-xl font-bold text-[var(--color-white)] group-hover:text-red-500 transition-colors">{CONTACT_CONSTANTS.phone}</div>
                </div>
                <svg class="w-8 h-8 text-red-600 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                </svg>
              </a>
            </div>
          </div>

          <!-- Декоративные элементы -->
          <div class="absolute -top-6 -right-6 w-20 h-20 bg-gradient-to-br from-red-600/10 to-transparent rounded-full blur-xl"></div>
          <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-gradient-to-tr from-red-600/5 to-transparent rounded-full blur-xl"></div>
        </div>
      </div>
    </div>
  </div>
</section>
