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

const situations = [
  "Супруг скрывает имущество",
  "Угроза похищения ребенка",
  "Насилие в семье",
  "Срочная блокировка счетов",
];
---

<section class="py-24 bg-[var(--color-navy-dark)] relative overflow-hidden">
  <!-- Декоративный разделитель -->
  <div
    class="absolute top-0 left-0 right-0 h-24 bg-[var(--color-navy)]"
    style="clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);"
  >
  </div>

  <!-- Анимированные полосы -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-1/4 -left-20 w-[150%] h-20 bg-[var(--color-gold)]/5 transform -rotate-6 animate-slide-diagonal"
    >
    </div>
    <div
      class="absolute top-1/3 -left-20 w-[150%] h-20 bg-[var(--color-gold)]/3 transform -rotate-6 animate-slide-diagonal"
      style="animation-delay: 2s;"
    >
    </div>
  </div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 pt-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
      <!-- Левая часть - экстренные ситуации -->
      <div>
        <div
          class="inline-flex items-center gap-2 px-4 py-2 bg-red-500/10 border border-red-500/20 rounded-full text-red-400 text-xs font-bold uppercase tracking-wider mb-6 animate-pulse"
        >
          <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>

        <h2
          class="text-4xl md:text-5xl font-bold text-[var(--color-white)] mb-6 leading-tight"
        >
          Срочная <span class="text-[var(--color-gold)]">юридическая</span><br
          />
          помощь 24/7
        </h2>

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

        <!-- Список экстренных ситуаций -->
        <div class="space-y-3 mb-10">
          {
            situations.map((situation, index) => (
              <div class="flex items-center gap-3 p-4 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-xl hover:border-red-500/30 hover:bg-red-500/5 transition-all group cursor-default">
                <div class="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center group-hover:bg-red-500/20 transition-colors">
                  <svg
                    class="w-4 h-4 text-red-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                    />
                  </svg>
                </div>
                <span class="text-[var(--color-gray-300)] font-medium">
                  {situation}
                </span>
                <svg
                  class="w-5 h-5 text-[var(--color-gray-600)] ml-auto group-hover:text-red-400 group-hover:translate-x-1 transition-all"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
            ))
          }
        </div>

        <!-- Контакты -->
        <div class="flex flex-col sm:flex-row gap-4">
          <a
            href={CONTACT_CONSTANTS.phoneHref}
            class="group flex-1 flex items-center justify-center gap-3 px-6 py-4 bg-red-500 hover:bg-red-600 text-white font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-red-500/20"
          >
            <svg
              class="w-6 h-6 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>
            <div class="text-left">
              <div class="text-xs opacity-80">Экстренный вызов</div>
              <div class="text-lg">{CONTACT_CONSTANTS.phone}</div>
            </div>
          </a>

          <div
            class="flex items-center gap-3 px-6 py-4 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl"
          >
            <span class="text-[var(--color-gray-500)] text-sm">Или:</span>
            <SocialIcons variant="messenger" />
          </div>
        </div>
      </div>

      <!-- Правая часть - форма обратного звонка -->
      <div class="relative">
        <div
          class="absolute -inset-4 bg-gradient-to-r from-[var(--color-gold)]/20 to-red-500/10 rounded-3xl blur-2xl animate-pulse-glow"
        >
        </div>

        <div
          class="relative bg-[var(--color-navy)] border border-[var(--color-gold)]/20 rounded-3xl p-8 backdrop-blur-sm"
        >
          <div class="text-center mb-8">
            <div
              class="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 flex items-center justify-center"
            >
              <svg
                class="w-8 h-8 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>
            </div>
            <h3 class="text-2xl font-bold text-[var(--color-white)] mb-2">
              Обратный звонок
            </h3>
            <p class="text-[var(--color-gray-500)] text-sm">
              Перезвоним за 5 минут
            </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\'><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\'>Заявка отправлена!</p><p class=\'text-[var(--color-gray-500)] text-sm\'>Мы перезвоним вам очень скоро</p></div>';"
          >
            <input
              type="text"
              placeholder="Ваше имя"
              required
              class="w-full px-4 py-3 bg-[var(--color-navy-dark)] 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-dark)] 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"
            />

            <select
              class="w-full px-4 py-3 bg-[var(--color-navy-dark)] 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="critical">Критическая — сегодня</option>
              <option value="urgent">Срочная — завтра</option>
              <option value="planned">Плановая — на этой неделе</option>
            </select>

            <button
              type="submit"
              class="w-full py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-[var(--color-gold)]/20 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </button>
          </form>

          <div
            class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/10 flex items-center justify-center gap-2 text-xs text-[var(--color-gray-500)]"
          >
            <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
              ></path>
            </svg>
            <span>Гарантируем конфиденциальность</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes slide-diagonal {
    0% {
      transform: translateX(-100%) rotate(-6deg);
    }
    100% {
      transform: translateX(100%) rotate(-6deg);
    }
  }
  @keyframes pulse-glow {
    0%,
    100% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.6;
    }
  }
  @keyframes ring {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(15deg);
    }
    75% {
      transform: rotate(-15deg);
    }
  }

  .animate-slide-diagonal {
    animation: slide-diagonal 15s linear infinite;
  }
  .animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
  }
  .animate-ring {
    animation: ring 2s ease-in-out infinite;
  }
</style>
