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

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

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

const urgentCases = [
  { text: "Срочный развод", time: "от 1 месяца" },
  { text: "Взыскание алиментов", time: "от 5 дней" },
  { text: "Защита от лишения прав", time: "срочно" },
];
---

<section
  class="relative min-h-screen flex items-center overflow-hidden bg-[var(--color-navy)]"
>
  <!-- Многослойный фон с parallax-эффектом -->
  <div class="absolute inset-0 z-0">
    <div
      class="absolute inset-0 bg-gradient-to-b from-[var(--color-navy)] via-[var(--color-navy)] to-[var(--color-navy-dark)]"
    >
    </div>

    <!-- Орнаментальные круги -->
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] border border-[var(--color-gold)]/5 rounded-full animate-spin-slow"
    >
    </div>
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] border border-[var(--color-gold)]/10 rounded-full animate-spin-reverse"
    >
    </div>
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] border border-[var(--color-gold)]/20 rounded-full animate-spin-slow"
      style="animation-duration: 30s;"
    >
    </div>

    <!-- Точечная сетка -->
    <div
      class="absolute inset-0 opacity-[0.03]"
      style="background-image: radial-gradient(var(--color-gold) 1px, transparent 1px); background-size: 30px 30px;"
    >
    </div>
  </div>

  <!-- Плавающие сердечки (символика) -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <svg
      class="absolute top-20 left-[10%] w-8 h-8 text-[var(--color-gold)]/10 animate-float-heart"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      ></path>
    </svg>
    <svg
      class="absolute top-40 right-[15%] w-6 h-6 text-[var(--color-gold)]/5 animate-float-heart-delayed"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      ></path>
    </svg>
    <svg
      class="absolute bottom-32 left-[20%] w-10 h-10 text-[var(--color-gold)]/10 animate-float-heart"
      style="animation-delay: 2s;"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      ></path>
    </svg>
  </div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      <!-- Левая колонка - основной контент -->
      <div class="lg:col-span-7">
        <!-- Тег с пульсацией - центрирован на мобильных -->
        <div class="flex justify-center lg:justify-start mt-8 lg:mt-0 mb-6">
          <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 animate-pulse-border"
          >
            <span class="relative flex h-2 w-2">
              <span
                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-gold)] opacity-75"
              ></span>
              <span
                class="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-gold)]"
              ></span>
            </span>
            Конфиденциально
          </div>
        </div>

        <!-- Заголовок с разрывной анимацией -->
        <h1
          class="text-5xl md:text-6xl lg:text-7xl font-bold text-[var(--color-white)] leading-[1.1] mb-6 overflow-hidden text-center lg:text-left"
        >
          <span class="block overflow-hidden">
            <span class="block animate-slide-up">Семейный</span>
          </span>
          <span class="block overflow-hidden">
            <span class="block animate-slide-up" style="animation-delay: 0.1s;">
              <span class="text-[var(--color-gold)]">юрист</span> в Сургуте
            </span>
          </span>
        </h1>

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

        <!-- Срочные кейсы -->
        <div class="flex flex-wrap justify-center lg:justify-start gap-3 mb-10">
          {
            urgentCases.map((item, index) => (
              <div
                class="group px-4 py-2 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-lg hover:border-[var(--color-gold)]/50 hover:bg-[var(--color-gold)]/5 transition-all cursor-default animate-fade-in"
                style={`animation-delay: ${0.3 + index * 0.1}s`}
              >
                <span class="text-[var(--color-white)] text-sm font-medium">
                  {item.text}
                </span>
                <span class="block text-[var(--color-gold)] text-xs">
                  {item.time}
                </span>
              </div>
            ))
          }
        </div>

        <!-- CTA группа -->
        <div
          class="flex flex-col sm:flex-row justify-center lg:justify-start gap-4 mb-12"
        >
          <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-xl overflow-hidden transition-all hover:shadow-[0_0_40px_rgba(191,155,88,0.4)] hover:scale-105 animate-fade-in cursor-pointer"
            style="animation-delay: 0.6s;"
          >
            <span
              class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"
            ></span>
            <span class="relative flex items-center justify-center gap-3">
              <svg
                class="w-5 h-5 animate-ring"
                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('consultation').scrollIntoView({behavior: 'smooth'})"
            class="px-8 py-4 bg-transparent border-2 border-[var(--color-gold)]/30 text-[var(--color-gold)] font-bold rounded-xl hover:bg-[var(--color-gold)]/10 hover:border-[var(--color-gold)] transition-all flex items-center justify-center gap-2 group animate-fade-in"
            style="animation-delay: 0.7s;"
          >
            <svg
              class="w-5 h-5 group-hover:rotate-12 transition-transform"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 2z"
              ></path>
            </svg>
            Записаться на прием
          </button>
        </div>

        <!-- Статистика в карточках -->
        <div
          class="grid grid-cols-3 gap-4 max-w-md mx-auto lg:max-w-none lg:mx-0"
        >
          <div
            class="p-4 bg-[var(--color-navy-dark)]/50 border border-[var(--color-gray-600)]/10 rounded-xl text-center hover:border-[var(--color-gold)]/30 transition-colors group"
          >
            <div
              class="text-3xl font-black text-[var(--color-gold)] mb-1 group-hover:scale-110 transition-transform"
            >
              500+
            </div>
            <div class="text-xs text-[var(--color-gray-500)]">Семей дел</div>
          </div>
          <div
            class="p-4 bg-[var(--color-navy-dark)]/50 border border-[var(--color-gray-600)]/10 rounded-xl text-center hover:border-[var(--color-gold)]/30 transition-colors group"
          >
            <div
              class="text-3xl font-black text-[var(--color-gold)] mb-1 group-hover:scale-110 transition-transform"
            >
              90%
            </div>
            <div class="text-xs text-[var(--color-gray-500)]">
              Мировых соглашений
            </div>
          </div>
          <div
            class="p-4 bg-[var(--color-navy-dark)]/50 border border-[var(--color-gray-600)]/10 rounded-xl text-center hover:border-[var(--color-gold)]/30 transition-colors group"
          >
            <div
              class="text-3xl font-black text-[var(--color-gold)] mb-1 group-hover:scale-110 transition-transform"
            >
              24/7
            </div>
            <div class="text-xs text-[var(--color-gray-500)]">Поддержка</div>
          </div>
        </div>
      </div>

      <!-- Правая колонка - интерактивная зона -->
      <div class="lg:col-span-5 relative hidden lg:block">
        <div class="relative">
          <!-- Свечение -->
          <div
            class="absolute -inset-4 bg-[var(--color-gold)]/10 rounded-3xl blur-2xl animate-pulse-glow"
          >
          </div>

          <!-- Карточка -->
          <div
            class="relative bg-[var(--color-navy-dark)] border border-[var(--color-gold)]/20 rounded-3xl p-8 backdrop-blur-sm"
          >
            <div class="flex items-center gap-4 mb-6">
              <div
                class="w-16 h-16 rounded-2xl bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold)]/70 flex items-center justify-center shadow-lg animate-shimmer"
              >
                <svg
                  class="w-8 h-8 text-[var(--color-white)]"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="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"
                  ></path>
                </svg>
              </div>
              <div>
                <h3 class="text-[var(--color-white)] font-bold text-xl">
                  Важно знать
                </h3>
                <p class="text-[var(--color-gray-500)] text-sm">При разводе</p>
              </div>
            </div>

            <ul class="space-y-4">
              <li class="flex items-start gap-3 group">
                <div
                  class="w-6 h-6 rounded-full bg-[var(--color-gold)]/20 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-[var(--color-gold)] transition-colors"
                >
                  <span
                    class="text-[var(--color-gold)] text-xs font-bold group-hover:text-[var(--color-white)]"
                    >!</span
                  >
                </div>
                <p class="text-[var(--color-gray-400)] text-sm">
                  Не покидайте совместно нажитое жильё без согласования
                </p>
              </li>
              <li class="flex items-start gap-3 group">
                <div
                  class="w-6 h-6 rounded-full bg-[var(--color-gold)]/20 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-[var(--color-gold)] transition-colors"
                >
                  <span
                    class="text-[var(--color-gold)] text-xs font-bold group-hover:text-[var(--color-white)]"
                    >!</span
                  >
                </div>
                <p class="text-[var(--color-gray-400)] text-sm">
                  Сохраняйте документы о доходах второго супруга
                </p>
              </li>
              <li class="flex items-start gap-3 group">
                <div
                  class="w-6 h-6 rounded-full bg-[var(--color-gold)]/20 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-[var(--color-gold)] transition-colors"
                >
                  <span
                    class="text-[var(--color-gold)] text-xs font-bold group-hover:text-[var(--color-white)]"
                    >!</span
                  >
                </div>
                <p class="text-[var(--color-gray-400)] text-sm">
                  Не подписывайте документы без юриста
                </p>
              </li>
            </ul>

            <div class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/10">
              <div class="flex items-center justify-between">
                <span class="text-[var(--color-gray-500)] text-sm"
                  >Первая консультация</span
                >
                <span class="text-[var(--color-gold)] font-bold">Бесплатно</span
                >
              </div>
            </div>
          </div>

          <!-- Маленькая карточка позади -->
          <div
            class="absolute -z-10 top-8 -right-4 w-full h-full bg-[var(--color-gold)]/5 border border-[var(--color-gold)]/10 rounded-3xl transform rotate-3"
          >
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes spin-slow {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes spin-reverse {
    from {
      transform: translate(-50%, -50%) rotate(360deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }
  @keyframes float-heart {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
      opacity: 0.1;
    }
    50% {
      transform: translateY(-20px) rotate(10deg);
      opacity: 0.2;
    }
  }
  @keyframes float-heart-delayed {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
      opacity: 0.05;
    }
    50% {
      transform: translateY(-15px) rotate(-10deg);
      opacity: 0.15;
    }
  }
  @keyframes slide-up {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes pulse-border {
    0%,
    100% {
      border-color: rgba(191, 155, 88, 0.2);
    }
    50% {
      border-color: rgba(191, 155, 88, 0.5);
    }
  }
  @keyframes pulse-glow {
    0%,
    100% {
      opacity: 0.1;
      transform: scale(1);
    }
    50% {
      opacity: 0.2;
      transform: scale(1.05);
    }
  }
  @keyframes ring {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(10deg);
    }
    75% {
      transform: rotate(-10deg);
    }
  }
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .animate-spin-slow {
    animation: spin-slow 40s linear infinite;
  }
  .animate-spin-reverse {
    animation: spin-reverse 30s linear infinite;
  }
  .animate-float-heart {
    animation: float-heart 6s ease-in-out infinite;
  }
  .animate-float-heart-delayed {
    animation: float-heart-delayed 8s ease-in-out infinite;
  }
  .animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
    opacity: 0;
  }
  .animate-pulse-border {
    animation: pulse-border 2s ease-in-out infinite;
  }
  .animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
  }
  .animate-ring {
    animation: ring 2s ease-in-out infinite;
  }
  .animate-shimmer {
    background: linear-gradient(
      90deg,
      var(--color-gold) 25%,
      #d4af37 50%,
      var(--color-gold) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
  }
</style>
