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

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

const {
  title = "Арбитражные споры",
  subtitle = "Защита интересов бизнеса в арбитражных судах всех инстанций. От Первого арбитражного суда до Верховного суда РФ.",
} = Astro.props;

const stats = [
  { value: "500+", label: "Дел в арбитраже" },
  { value: "92%", label: "Успешных решений" },
  { value: "15+", label: "Лет практики" },
  { value: "₽500М+", 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.03]"
      style="background-image: linear-gradient(var(--color-gold) 1px, transparent 1px), linear-gradient(90deg, var(--color-gold) 1px, transparent 1px); background-size: 80px 80px;"
    ></div>
    
    <!-- Градиентные пятна -->
    <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-bl from-[var(--color-gold)]/10 to-transparent rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-gradient-to-tr from-[var(--color-blue-primary)]/5 to-transparent rounded-full blur-3xl"></div>
  </div>

  <!-- Декоративные линии -->
  <div class="absolute inset-0 z-0 pointer-events-none">
    <div class="absolute top-[20%] left-0 w-[30%] h-px bg-gradient-to-r from-[var(--color-gold)]/40 to-transparent"></div>
    <div class="absolute top-[40%] right-0 w-[40%] h-px bg-gradient-to-l from-[var(--color-gold)]/30 to-transparent"></div>
    <div class="absolute bottom-[30%] left-[10%] w-[25%] h-px bg-gradient-to-r from-[var(--color-gold)]/20 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-7">
        <!-- Бейдж -->
        <div class="inline-flex items-center gap-3 mb-8">
          <div class="flex items-center gap-2">
            <span class="w-3 h-3 bg-[var(--color-gold)] rounded-sm rotate-45"></span>
            <span class="w-2 h-2 bg-[var(--color-gold)]/60 rounded-sm rotate-45"></span>
            <span class="w-1 h-1 bg-[var(--color-gold)]/40 rounded-sm rotate-45"></span>
          </div>
          <span class="text-[var(--color-gold)] 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-[var(--color-gold)] 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-xl">
          {subtitle}
        </p>

        <!-- Кнопки -->
        <div class="flex flex-col sm:flex-row gap-4 mb-12">
          <a
            href="#contact"
            class="group px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-lg transition-all hover:shadow-[0_0_30px_rgba(191,155,88,0.4)] flex items-center justify-center gap-3"
          >
            <span>Бесплатная консультация</span>
            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" 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>
          </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-[var(--color-gold)]/50 hover:bg-[var(--color-gold)]/5 transition-all flex items-center justify-center gap-3 cursor-pointer"
          >
            <svg class="w-5 h-5 text-[var(--color-gold)]" 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>
            {CONTACT_CONSTANTS.phone}
          </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-[var(--color-gold)] 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-5 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-10 h-10 bg-[var(--color-gold)]/10 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-[var(--color-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"></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 justify-between py-3 border-b border-[var(--color-gray-600)]/20">
                <span class="text-[var(--color-gray-400)] text-sm">Первая инстанция</span>
                <span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
              </div>
              <div class="flex items-center justify-between py-3 border-b border-[var(--color-gray-600)]/20">
                <span class="text-[var(--color-gray-400)] text-sm">Апелляция</span>
                <span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
              </div>
              <div class="flex items-center justify-between py-3 border-b border-[var(--color-gray-600)]/20">
                <span class="text-[var(--color-gray-400)] text-sm">Кассация</span>
                <span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
              </div>
              <div class="flex items-center justify-between py-3">
                <span class="text-[var(--color-gray-400)] text-sm">Верховный суд</span>
                <span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
              </div>
            </div>

            <!-- Декоративная линия снизу -->
            <div class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/20">
              <div class="flex items-center gap-2 text-[var(--color-gray-500)] text-xs">
                <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
                <span>Работаю по всему Уральскому округу</span>
              </div>
            </div>
          </div>

          <!-- Фоновые элементы -->
          <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-[var(--color-gold)]/10 to-transparent rounded-full blur-xl"></div>
          <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-gradient-to-tr from-[var(--color-gold)]/5 to-transparent rounded-full blur-xl"></div>
        </div>
      </div>
    </div>
  </div>
</section>
