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

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

const {
  title = "Остановим банки и коллекторов",
  subtitle = "Жесткая правовая защита должников. Списываем долги законно, останавливаем звонки, защищаем имущество и доходы от взыскания.",
} = Astro.props;

const threats = [
  { icon: "📞", text: "Звонки коллекторов", solved: "Остановим за 1 день" },
  { icon: "🏠", text: "Угроза выселения", solved: "Сохраним жильё" },
  { icon: "💰", text: "Арест счетов", solved: "Разблокируем" },
  { icon: "⚖️", text: "Суд с банком", solved: "Выиграем дело" },
];
---

<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 left-1/4 w-px h-full bg-gradient-to-b from-[var(--color-gold)]/20 to-transparent transform rotate-12 origin-top animate-ray"
    >
    </div>
    <div
      class="absolute top-0 left-1/2 w-px h-full bg-gradient-to-b from-[var(--color-gold)]/10 to-transparent transform -rotate-6 origin-top animate-ray-delayed"
    >
    </div>
    <div
      class="absolute top-0 right-1/3 w-px h-full bg-gradient-to-b from-[var(--color-gold)]/15 to-transparent transform rotate-6 origin-top animate-ray"
    >
    </div>

    <!-- Сетка -->
    <div
      class="absolute inset-0 opacity-[0.03]"
      style="background-image: linear-gradient(90deg, var(--color-gold) 1px, transparent 1px), linear-gradient(var(--color-gold) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) translateY(-100px);"
    >
    </div>
  </div>

  <!-- Щит-защита -->
  <div
    class="absolute right-0 top-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-5 pointer-events-none hidden xl:block"
  >
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      class="w-full h-full text-[var(--color-gold)] animate-shield-pulse"
    >
      <path
        d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"
      ></path>
    </svg>
  </div>

  <!-- Плавающие элементы давления -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-20 left-[10%] px-4 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm animate-ray"
    >
      <span class="flex items-center gap-2">
        <svg
          class="w-4 h-4 animate-pulse"
          fill="currentColor"
          viewBox="0 0 20 20"
          ><path
            d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
          ></path><path
            d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
          ></path></svg
        >
        Угрозы банка
      </span>
    </div>
    <div
      class="absolute top-40 right-[15%] px-4 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm animate-ray-delayed"
    >
      <span class="flex items-center gap-2">
        <svg
          class="w-4 h-4 animate-pulse"
          fill="currentColor"
          viewBox="0 0 20 20"
          ><path
            d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"
          ></path></svg
        >
        Звонки 24/7
      </span>
    </div>
  </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="inline-flex items-center gap-2 px-4 py-2 bg-red-500/10 border border-red-500/30 rounded-full text-red-400 text-xs font-black uppercase tracking-wider mb-6 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-red-400 opacity-75"
            ></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-red-400"
            ></span>
          </span>
          Срочная помощь должникам
        </div>

        <!-- Заголовок -->
        <h1
          class="text-4xl md:text-5xl lg:text-6xl font-black text-[var(--color-white)] leading-[1.1] mb-6"
        >
          <span class="block overflow-hidden">
            <span class="block animate-typewriter">Остановим</span>
          </span>
          <span
            class="block text-[var(--color-gold)] animate-typewriter-delayed"
          >
            банки и коллекторов
          </span>
        </h1>

        <!-- Подзаголовок -->
        <div class="relative mb-8 pl-6 border-l-4 border-red-500/50">
          <p
            class="text-[var(--color-gray-400)] text-lg md:text-xl leading-relaxed"
          >
            {subtitle}
          </p>
        </div>

        <!-- Карточки угроз -->
        <div class="grid grid-cols-2 gap-3 mb-10">
          {
            threats.map((item, index) => (
              <div
                class="group p-4 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-xl hover:border-[var(--color-gold)]/50 hover:bg-[var(--color-gold)]/5 transition-all cursor-default animate-fade-in-up"
                style={`animation-delay: ${0.3 + index * 0.1}s`}
              >
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-2xl group-hover:scale-110 transition-transform">
                    {item.icon}
                  </span>
                  <span class="text-[var(--color-gray-400)] text-sm line-through decoration-red-500/50">
                    {item.text}
                  </span>
                </div>
                <div class="flex items-center gap-2">
                  <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>
                  <span class="text-[var(--color-gold)] font-bold text-sm">
                    {item.solved}
                  </span>
                </div>
              </div>
            ))
          }
        </div>

        <!-- CTA группа -->
        <div class="flex flex-col sm:flex-row gap-4 mb-8">
          <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-black text-lg rounded-xl overflow-hidden transition-all hover:shadow-[0_0_40px_rgba(191,155,88,0.4)] hover:scale-105 animate-fade-in-up cursor-pointer"
            style="animation-delay: 0.7s;"
          >
            <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-6 h-6 animate-shake"
                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('services').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-xl hover:border-[var(--color-gold)]/50 hover:bg-[var(--color-gold)]/5 transition-all flex items-center justify-center gap-2 group animate-fade-in-up"
            style="animation-delay: 0.8s;"
          >
            <svg
              class="w-5 h-5 text-[var(--color-gold)] 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="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"
              ></path>
            </svg>
            Смотреть услуги
          </button>
        </div>

        <!-- Статистика -->
        <div class="flex flex-wrap gap-4">
          <div
            class="px-6 py-3 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/10 rounded-xl"
          >
            <div class="text-2xl font-black text-[var(--color-gold)]">
              500+ млн ₽
            </div>
            <div class="text-xs text-[var(--color-gray-500)]">
              Списано долгов
            </div>
          </div>
          <div
            class="px-6 py-3 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/10 rounded-xl"
          >
            <div class="text-2xl font-black text-[var(--color-gold)]">100%</div>
            <div class="text-xs text-[var(--color-gray-500)]">
              Остановка звонков
            </div>
          </div>
          <div
            class="px-6 py-3 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/10 rounded-xl"
          >
            <div class="text-2xl font-black text-[var(--color-gold)]">0 ₽</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-0 bg-[var(--color-gold)]/20 rounded-full blur-3xl animate-shield-glow"
          >
          </div>

          <!-- Карточка щита -->
          <div
            class="relative bg-[var(--color-navy-dark)] border-2 border-[var(--color-gold)]/30 rounded-3xl p-8 backdrop-blur-sm overflow-hidden"
          >
            <!-- Верхняя плашка -->
            <div
              class="absolute top-0 left-0 right-0 px-4 py-2 bg-[var(--color-gold)]/10 border-b border-[var(--color-gold)]/20 flex items-center justify-between"
            >
              <span
                class="text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider"
                >Статус защиты</span
              >
              <span class="flex items-center gap-1 text-green-400 text-xs">
                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"
                ></span>
                Активна
              </span>
            </div>

            <div class="pt-8 text-center">
              <!-- Анимированный щит -->
              <div class="relative w-32 h-32 mx-auto mb-6">
                <div
                  class="absolute inset-0 bg-[var(--color-gold)]/20 rounded-full animate-shield-rotate"
                >
                </div>
                <div
                  class="absolute inset-2 bg-[var(--color-gold)]/10 rounded-full animate-shield-rotate-reverse"
                >
                </div>
                <div
                  class="relative w-full h-full flex items-center justify-center"
                >
                  <svg
                    class="w-20 h-20 text-[var(--color-gold)] animate-shield-pulse"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"
                    ></path>
                  </svg>
                </div>
              </div>

              <h3 class="text-[var(--color-white)] font-bold text-xl mb-2">
                Ваша защита активна
              </h3>
              <p class="text-[var(--color-gray-500)] text-sm mb-6">
                Перекрываем все каналы давления кредиторов
              </p>

              <!-- Индикаторы блокировки -->
              <div class="space-y-3">
                <div
                  class="flex items-center justify-between p-3 bg-[var(--color-navy)] rounded-lg border border-green-500/20"
                >
                  <div class="flex items-center gap-3">
                    <svg
                      class="w-5 h-5 text-green-400"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
                      ></path>
                    </svg>
                    <span class="text-[var(--color-gray-300)] text-sm"
                      >Звонки коллекторов</span
                    >
                  </div>
                  <span
                    class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded font-bold"
                    >БЛОК</span
                  >
                </div>

                <div
                  class="flex items-center justify-between p-3 bg-[var(--color-navy)] rounded-lg border border-green-500/20"
                >
                  <div class="flex items-center gap-3">
                    <svg
                      class="w-5 h-5 text-green-400"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
                      ></path>
                    </svg>
                    <span class="text-[var(--color-gray-300)] text-sm"
                      >Списание с карты</span
                    >
                  </div>
                  <span
                    class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded font-bold"
                    >СТОП</span
                  >
                </div>

                <div
                  class="flex items-center justify-between p-3 bg-[var(--color-navy)] rounded-lg border border-green-500/20"
                >
                  <div class="flex items-center gap-3">
                    <svg
                      class="w-5 h-5 text-green-400"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
                      ></path>
                    </svg>
                    <span class="text-[var(--color-gray-300)] text-sm"
                      >Угрозы и шантаж</span
                    >
                  </div>
                  <span
                    class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded font-bold"
                    >ЗАПРЕТ</span
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- Декоративные углы -->
          <div
            class="absolute -top-2 -left-2 w-8 h-8 border-t-2 border-l-2 border-[var(--color-gold)]"
          >
          </div>
          <div
            class="absolute -top-2 -right-2 w-8 h-8 border-t-2 border-r-2 border-[var(--color-gold)]"
          >
          </div>
          <div
            class="absolute -bottom-2 -left-2 w-8 h-8 border-b-2 border-l-2 border-[var(--color-gold)]"
          >
          </div>
          <div
            class="absolute -bottom-2 -right-2 w-8 h-8 border-b-2 border-r-2 border-[var(--color-gold)]"
          >
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes ray {
    0%,
    100% {
      opacity: 0.1;
      transform: rotate(12deg) scaleY(1);
    }
    50% {
      opacity: 0.3;
      transform: rotate(12deg) scaleY(1.1);
    }
  }
  @keyframes ray-delayed {
    0%,
    100% {
      opacity: 0.05;
      transform: rotate(-6deg) scaleY(1);
    }
    50% {
      opacity: 0.2;
      transform: rotate(-6deg) scaleY(1.1);
    }
  }
  @keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  @keyframes typewriter-delayed {
    0%,
    50% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes pulse-border {
    0%,
    100% {
      border-color: rgba(239, 68, 68, 0.3);
    }
    50% {
      border-color: rgba(239, 68, 68, 0.6);
    }
  }
  @keyframes shake {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-5deg);
    }
    75% {
      transform: rotate(5deg);
    }
  }
  @keyframes shield-glow {
    0%,
    100% {
      opacity: 0.2;
      transform: scale(1);
    }
    50% {
      opacity: 0.4;
      transform: scale(1.05);
    }
  }
  @keyframes shield-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes shield-rotate-reverse {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
  @keyframes shield-pulse {
    0%,
    100% {
      filter: drop-shadow(0 0 10px rgba(191, 155, 88, 0.5));
    }
    50% {
      filter: drop-shadow(0 0 20px rgba(191, 155, 88, 0.8));
    }
  }

  .animate-ray {
    animation: ray 4s ease-in-out infinite;
  }
  .animate-ray-delayed {
    animation: ray-delayed 5s ease-in-out infinite;
  }
  .animate-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 1s steps(10) forwards;
  }
  .animate-typewriter-delayed {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter-delayed 2s steps(20) forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
    opacity: 0;
  }
  .animate-pulse-border {
    animation: pulse-border 2s ease-in-out infinite;
  }
  .animate-shake {
    animation: shake 2s ease-in-out infinite;
  }
  .animate-shield-glow {
    animation: shield-glow 3s ease-in-out infinite;
  }
  .animate-shield-rotate {
    animation: shield-rotate 10s linear infinite;
  }
  .animate-shield-rotate-reverse {
    animation: shield-rotate-reverse 15s linear infinite;
  }
  .animate-shield-pulse {
    animation: shield-pulse 2s ease-in-out infinite;
  }
</style>
