---
import { CONTACT_CONSTANTS } from "@constants/constants.ts";
import SocialIcons from "@components/base/SocialIcons.astro";

const panicSituations = [
  {
    title: "Приставы у дверей",
    action: "Срочный выезд юриста",
    time: "30 минут",
  },
  {
    title: "Арестовали зарплату",
    action: "Разблокировка счета",
    time: "2 часа",
  },
  { title: "Коллекторы угрожают", action: "Подача в полицию", time: "1 час" },
  { title: "Выселение из квартиры", action: "Судебный запрет", time: "срочно" },
];
---

<section class="py-24 bg-[var(--color-navy)] relative overflow-hidden">
  <!-- Эффект тревоги - мигающий фон -->
  <div class="absolute inset-0 bg-red-500/5 animate-alert-bg"></div>

  <!-- Диагональные полосы -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-0 left-0 w-[200%] h-20 bg-red-500/10 transform -rotate-6 -translate-x-1/2 animate-slide-warning"
    >
    </div>
    <div
      class="absolute top-20 left-0 w-[200%] h-20 bg-[var(--color-gold)]/5 transform -rotate-6 -translate-x-1/2 animate-slide-warning-delayed"
    >
    </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-2 gap-12 items-center">
      <!-- Левая часть - экстренные ситуации -->
      <div>
        <div
          class="inline-flex items-center gap-2 px-4 py-2 bg-red-500 border border-red-600 rounded-full text-white text-xs font-black uppercase tracking-wider mb-6 animate-pulse"
        >
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
              clip-rule="evenodd"></path>
          </svg>
          Экстренная помощь 24/7
        </div>

        <h2
          class="text-4xl md:text-5xl font-black text-[var(--color-white)] mb-6 leading-tight"
        >
          Паника? <span class="text-red-400">Не надо.</span><br />
          <span class="text-[var(--color-gold)]">Есть решение.</span>
        </h2>

        <p class="text-[var(--color-gray-400)] text-lg mb-8 leading-relaxed">
          Критические ситуации требуют мгновенной реакции. У нас есть опыт и
          инструменты для остановки любого давления в течение часа.
        </p>

        <!-- Список экстренных кейсов -->
        <div class="space-y-4 mb-10">
          {
            panicSituations.map((situation, index) => (
              <div
                class="group flex items-center gap-4 p-4 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-xl hover:border-red-500/50 hover:bg-red-500/5 transition-all cursor-default animate-fade-in-left"
                style={`animation-delay: ${index * 0.1}s`}
              >
                <div class="w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center flex-shrink-0 group-hover:bg-red-500/20 transition-colors">
                  <span class="text-red-400 font-black text-lg">!</span>
                </div>
                <div class="flex-1">
                  <div class="text-[var(--color-white)] font-bold mb-1">
                    {situation.title}
                  </div>
                  <div class="text-[var(--color-gold)] text-sm">
                    {situation.action}
                  </div>
                </div>
                <div class="px-3 py-1 bg-[var(--color-navy)] rounded-lg text-xs text-[var(--color-gray-500)] border border-[var(--color-gray-600)]/20">
                  {situation.time}
                </div>
              </div>
            ))
          }
        </div>

        <!-- Телефон экстренный -->
        <a
          href={CONTACT_CONSTANTS.phoneHref}
          class="group flex items-center gap-4 p-6 bg-red-500 hover:bg-red-600 rounded-2xl transition-all hover:shadow-2xl hover:shadow-red-500/20 animate-pulse-slow"
        >
          <div
            class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center animate-shake"
          >
            <svg
              class="w-8 h-8 text-white"
              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>
          </div>
          <div>
            <div
              class="text-white/80 text-sm font-bold uppercase tracking-wider mb-1"
            >
              Экстренный вызов
            </div>
            <div class="text-white text-3xl font-black">
              {CONTACT_CONSTANTS.phone}
            </div>
          </div>
          <svg
            class="w-8 h-8 text-white/50 ml-auto group-hover:translate-x-2 transition-transform"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </a>
      </div>

      <!-- Правая часть - форма быстрого старта -->
      <div class="relative">
        <div
          class="absolute -inset-4 bg-[var(--color-gold)]/10 rounded-3xl blur-2xl animate-pulse"
        >
        </div>

        <div
          class="relative bg-[var(--color-navy-dark)] border-2 border-[var(--color-gold)]/30 rounded-3xl p-8"
        >
          <div class="text-center mb-8">
            <div
              class="w-20 h-20 mx-auto mb-4 rounded-full bg-[var(--color-gold)]/10 border-2 border-[var(--color-gold)]/30 flex items-center justify-center animate-bounce-slow"
            >
              <svg
                class="w-10 h-10 text-[var(--color-gold)]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-black text-[var(--color-white)] mb-2">
              Быстрый старт защиты
            </h3>
            <p class="text-[var(--color-gray-500)] text-sm">
              Заполните форму — начнем действовать через 15 минут
            </p>
          </div>

          <form
            class="space-y-4"
            onsubmit="event.preventDefault(); this.innerHTML='<div class=\'text-center py-8\'><div class=\'w-16 h-16 mx-auto mb-4 rounded-full bg-green-500/20 flex items-center justify-center animate-bounce\'><svg class=\'w-8 h-8 text-green-400\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M5 13l4 4L19 7\'></path></svg></div><p class=\'text-[var(--color-white)] font-bold text-lg\'>Заявка получена!</p><p class=\'text-[var(--color-gold)] font-bold\'>Юрист уже в пути</p></div>';"
          >
            <div class="grid grid-cols-2 gap-4">
              <input
                type="text"
                placeholder="Имя"
                required
                class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-white)] placeholder-[var(--color-gray-600)] focus:border-[var(--color-gold)] focus:outline-none transition-colors"
              />
              <input
                type="tel"
                placeholder="Телефон"
                required
                class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-white)] placeholder-[var(--color-gray-600)] focus:border-[var(--color-gold)] focus:outline-none transition-colors"
              />
            </div>

            <select
              class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-gray-400)] focus:border-[var(--color-gold)] focus:outline-none transition-colors"
            >
              <option value="">Что происходит?</option>
              <option value="collectors">Звонят коллекторы</option>
              <option value="court">Пришла повестка в суд</option>
              <option value="arrest">Арестовали счета</option>
              <option value="eviction">Угрожают выселением</option>
              <option value="bailiffs">Приставы описывают имущество</option>
              <option value="other">Другое</option>
            </select>

            <input
              type="number"
              placeholder="Сумма долга (примерно)"
              class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-white)] placeholder-[var(--color-gray-600)] focus:border-[var(--color-gold)] focus:outline-none transition-colors"
            />

            <button
              type="submit"
              class="w-full py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-navy)] font-black text-lg rounded-xl transition-all hover:shadow-lg hover:shadow-[var(--color-gold)]/30 flex items-center justify-center gap-2 group"
            >
              <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="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </button>
          </form>

          <div
            class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/10 grid grid-cols-2 gap-4 text-center"
          >
            <div>
              <div class="text-[var(--color-gold)] font-bold text-lg">
                15 мин
              </div>
              <div class="text-[var(--color-gray-500)] text-xs">На ответ</div>
            </div>
            <div>
              <div class="text-[var(--color-gold)] font-bold text-lg">
                1 час
              </div>
              <div class="text-[var(--color-gray-500)] text-xs">На выезд</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes alert-bg {
    0%,
    100% {
      opacity: 0.05;
    }
    50% {
      opacity: 0.1;
    }
  }
  @keyframes slide-warning {
    0% {
      transform: translateX(-100%) rotate(-6deg);
    }
    100% {
      transform: translateX(0) rotate(-6deg);
    }
  }
  @keyframes slide-warning-delayed {
    0% {
      transform: translateX(-100%) rotate(-6deg);
    }
    100% {
      transform: translateX(0) rotate(-6deg);
    }
  }
  @keyframes fade-in-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes pulse-slow {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
      box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
    }
  }
  @keyframes shake {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-10deg);
    }
    75% {
      transform: rotate(10deg);
    }
  }
  @keyframes bounce-slow {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .animate-alert-bg {
    animation: alert-bg 2s ease-in-out infinite;
  }
  .animate-slide-warning {
    animation: slide-warning 20s linear infinite;
  }
  .animate-slide-warning-delayed {
    animation: slide-warning-delayed 20s linear infinite;
    animation-delay: 10s;
  }
  .animate-fade-in-left {
    animation: fade-in-left 0.5s ease-out forwards;
    opacity: 0;
  }
  .animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
  }
  .animate-shake {
    animation: shake 0.5s ease-in-out infinite;
  }
  .animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
  }
</style>
