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

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

const {
  title = "Гражданские правовые споры",
  subtitle = "Решение сложных имущественных и семейных конфликтов. Полное сопровождение от консультации до исполнения решения суда.",
} = Astro.props;

const features = [
  "Бесплатный первичный анализ",
  "Работаем по всему ХМАО-Югра",
  "Оплата по результату",
];
---

<section
  class="relative min-h-screen flex items-center overflow-hidden bg-[var(--color-navy)]"
>
  <!-- Диагональный фон -->
  <div class="absolute inset-0 z-0">
    <div
      class="absolute inset-0 bg-gradient-to-br from-[var(--color-navy)] via-[var(--color-navy)] to-[var(--color-navy-dark)]"
    >
    </div>
    <div
      class="absolute top-0 right-0 w-2/3 h-full bg-[var(--color-gold)] opacity-[0.02] transform skew-x-12 translate-x-1/4"
    >
    </div>
    <div
      class="absolute bottom-0 left-0 w-1/2 h-1/2 bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-[150px]"
    >
    </div>
  </div>

  <!-- Анимированные линии -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/20 to-transparent animate-slide-right"
    >
    </div>
    <div
      class="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/10 to-transparent animate-slide-left"
    >
    </div>
    <div
      class="absolute top-3/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/20 to-transparent animate-slide-right"
      style="animation-delay: 1s;"
    >
    </div>
  </div>

  <!-- Плавающие декорации -->
  <div
    class="absolute top-20 right-20 w-32 h-32 border border-[var(--color-gold)]/10 rounded-full animate-float"
  >
  </div>
  <div
    class="absolute top-20 right-20 w-24 h-24 border border-[var(--color-gold)]/20 rounded-full animate-float-delayed"
  >
  </div>

  <div
    class="absolute bottom-32 left-20 w-40 h-40 bg-[var(--color-gold)]/5 rounded-full blur-3xl animate-pulse-slow"
  >
  </div>

  <div
    class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 pt-8 md:pt-0"
  >
    <div class="max-w-4xl mx-auto md:mx-0">
      <!-- Тег -->
      <div class="flex justify-center md:justify-start mb-8">
        <div
          class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider backdrop-blur-sm"
        >
          <span
            class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"
          ></span>
          Гражданское право
        </div>
      </div>

      <!-- Заголовок с выделением -->
      <h1
        class="text-5xl md:text-7xl font-bold text-[var(--color-white)] leading-[1.05] mb-8 text-center md:text-left"
      >
        {
          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>

      <!-- Подзаголовок с линией -->
      <div class="relative pl-0 md:pl-8 mb-12 text-center md:text-left">
        <div
          class="hidden md:block absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-[var(--color-gold)] to-transparent"
        >
        </div>
        <p
          class="text-[var(--color-gray-400)] text-xl md:text-2xl leading-relaxed"
        >
          {subtitle}
        </p>
      </div>

      <!-- Быстрые фичи -->
      <div class="flex flex-wrap gap-4 mb-12 justify-center md:justify-start">
        {
          features.map((feature) => (
            <div class="flex items-center gap-2 px-4 py-2 bg-[var(--color-navy-dark)]/50 border border-[var(--color-gray-600)]/20 rounded-lg text-[var(--color-gray-400)] text-sm">
              <svg
                class="w-4 h-4 text-[var(--color-gold)]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 13l4 4L19 7"
                />
              </svg>
              {feature}
            </div>
          ))
        }
      </div>

      <!-- CTA группа -->
      <div class="flex flex-col sm:flex-row gap-4">
        <button
          data-consultation-modal
          class="group relative px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-lg overflow-hidden transition-all hover:shadow-[0_0_40px_rgba(191,155,88,0.3)] hover:-translate-y-1 cursor-pointer"
        >
          <span
            class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"
          ></span>
          <span class="relative flex items-center justify-center gap-3">
            <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="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>
            Бесплатная консультация
          </span>
        </button>

        <button
          onclick="document.getElementById('calculator').scrollIntoView({behavior: 'smooth'})"
          class="px-8 py-4 bg-transparent border-2 border-[var(--color-gray-600)]/30 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-2 group"
        >
          <svg
            class="w-5 h-5 text-[var(--color-gold)] 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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"
            ></path>
          </svg>
          Рассчитать стоимость
        </button>
      </div>

      <!-- Статистика в ряд -->
      <div class="mt-16 pt-8 border-t border-[var(--color-gray-600)]/10">
        <div class="grid grid-cols-3 gap-8 text-center md:text-left">
          <div>
            <div class="text-3xl font-black text-[var(--color-gold)] mb-1">
              1000+
            </div>
            <div class="text-sm text-[var(--color-gray-500)]">
              Выигранных дел
            </div>
          </div>
          <div>
            <div class="text-3xl font-black text-[var(--color-gold)] mb-1">
              95%
            </div>
            <div class="text-sm text-[var(--color-gray-500)]">
              Успешных исходов
            </div>
          </div>
          <div>
            <div class="text-3xl font-black text-[var(--color-gold)] mb-1">
              12 лет
            </div>
            <div class="text-sm text-[var(--color-gray-500)]">
              Юридической практики
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Декоративная плашка справа -->
  <div class="hidden xl:block absolute right-16 top-1/2 -translate-y-1/2">
    <div class="relative">
      <div
        class="absolute -inset-4 bg-[var(--color-gold)]/10 rounded-2xl blur-xl"
      >
      </div>
      <div
        class="relative bg-[var(--color-navy-dark)]/80 backdrop-blur border border-[var(--color-gold)]/20 rounded-2xl p-6 w-80"
      >
        <div class="flex items-center gap-3 mb-4">
          <div
            class="w-10 h-10 rounded-lg bg-[var(--color-gold)]/20 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="2"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <div>
            <div class="text-[var(--color-white)] font-bold text-sm">
              Срочная помощь
            </div>
            <div class="text-[var(--color-gray-500)] text-xs">
              Ответ за 15 минут
            </div>
          </div>
        </div>
        <div class="space-y-2">
          <div class="flex justify-between text-sm">
            <span class="text-[var(--color-gray-500)]">Семейные дела</span>
            <span class="text-[var(--color-gold)]">24/7</span>
          </div>
          <div class="flex justify-between text-sm">
            <span class="text-[var(--color-gray-500)]">Недвижимость</span>
            <span class="text-[var(--color-gold)]">24/7</span>
          </div>
          <div class="flex justify-between text-sm">
            <span class="text-[var(--color-gray-500)]">Наследство</span>
            <span class="text-[var(--color-gold)]">Пн-Пт</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes slide-right {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes slide-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(5deg);
    }
  }
  @keyframes float-delayed {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-15px) rotate(-5deg);
    }
  }
  @keyframes pulse-slow {
    0%,
    100% {
      opacity: 0.05;
      transform: scale(1);
    }
    50% {
      opacity: 0.1;
      transform: scale(1.1);
    }
  }

  .animate-slide-right {
    animation: slide-right 8s linear infinite;
  }
  .animate-slide-left {
    animation: slide-left 8s linear infinite;
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  .animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
  }
  .animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
  }
</style>
