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

const benefits = [
  { value: "15", label: "минут", desc: "Среднее время ответа" },
  { value: "0", label: "₽", desc: "Первичная консультация" },
  { value: "100%", label: "", desc: "Конфиденциальность" },
];
---

<section
  class="py-16 md:py-24 bg-[var(--color-navy-dark)] relative overflow-hidden"
>
  <!-- Диагональный разделитель -->
  <div
    class="absolute top-0 left-0 w-full h-16 md:h-24 bg-[var(--color-navy)] transform -skew-y-2 origin-top-left"
  >
  </div>

  <!-- Фон -->
  <div class="absolute inset-0">
    <div
      class="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_var(--color-gold)_0%,_transparent_50%)] opacity-[0.03]"
    >
    </div>
    <!-- Геометрический паттерн -->
    <div
      class="absolute inset-0 opacity-[0.02]"
      style="background-image: linear-gradient(45deg, var(--color-gold) 1px, transparent 1px), linear-gradient(-45deg, var(--color-gold) 1px, transparent 1px); background-size: 50px 50px;"
    >
    </div>
  </div>

  <div
    class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 pt-8 md:pt-12"
  >
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center">
      <!-- Левая часть - форма быстрой связи -->
      <div class="relative order-2 lg:order-1">
        <div
          class="absolute -inset-4 bg-[var(--color-gold)]/5 rounded-3xl blur-2xl"
        >
        </div>
        <div
          class="relative bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-2xl md:rounded-3xl p-6 md:p-8 lg:p-10"
        >
          <h3
            class="text-xl md:text-2xl font-bold text-[var(--color-white)] mb-2 text-center md:text-left"
          >
            Срочная консультация
          </h3>
          <p
            class="text-[var(--color-gray-500)] text-sm md:text-base mb-6 md:mb-8 text-center md:text-left"
          >
            Опишите ситуацию — перезвоним за 15 минут
          </p>

          <form
            class="space-y-3 md:space-y-4"
            onsubmit="event.preventDefault(); alert('Заявка отправлена!');"
          >
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
              <input
                type="text"
                placeholder="Ваше имя"
                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 text-sm md:text-base"
              />
              <input
                type="tel"
                placeholder="Телефон"
                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 text-sm md:text-base"
              />
            </div>
            <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 text-sm md:text-base"
            >
              <option>Выберите тип дела</option>
              <option>Договорные споры</option>
              <option>Корпоративные споры</option>
              <option>Банкротство</option>
              <option>Налоговые споры</option>
              <option>Недвижимость и земля</option>
              <option>Госзакупки</option>
              <option>Другое</option>
            </select>
            <textarea
              placeholder="Краткое описание ситуации"
              rows="3"
              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 resize-none text-sm md:text-base"
            ></textarea>

            <button
              type="submit"
              class="w-full py-3 md: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 text-sm md:text-base"
            >
              <span>Отправить заявку</span>
              <svg
                class="w-4 h-4 md:w-5 md: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>

          <p class="text-xs text-[var(--color-gray-600)] mt-4 text-center">
            Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности
          </p>
        </div>
      </div>

      <!-- Правая часть - контакты -->
      <div class="order-1 lg:order-2 text-center lg:text-left">
        <span
          class="text-[var(--color-gold)] text-xs md:text-sm font-bold uppercase tracking-wider mb-3 md:mb-4 block"
          >Контакты</span
        >
        <h2
          class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-white)] mb-4 md:mb-6 leading-tight"
        >
          Нужна срочная <span class="text-[var(--color-gold)]">помощь</span> арбитражного управляющего?
        </h2>
        <p
          class="text-[var(--color-gray-400)] text-base md:text-lg mb-8 md:mb-10 leading-relaxed"
        >
          Арбитражные споры требуют немедленных действий. Чем раньше вы обратитесь, тем больше шансов на благоприятный исход для вашего бизнеса.
        </p>

        <!-- Быстрые цифры -->
        <div
          class="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-6 mb-8 md:mb-10"
        >
          {
            benefits.map((item) => (
              <div class="text-center p-4 bg-[var(--color-navy)] rounded-xl md:rounded-2xl border border-[var(--color-gray-600)]/10">
                <div class="text-2xl md:text-3xl font-black text-[var(--color-gold)] mb-1">
                  {item.value}
                  <span class="text-base md:text-lg">{item.label}</span>
                </div>
                <div class="text-xs md:text-sm text-[var(--color-gray-500)]">
                  {item.desc}
                </div>
              </div>
            ))
          }
        </div>

        <!-- Телефон -->
        <button
          data-consultation-modal
          class="group flex flex-col sm:flex-row items-center gap-4 p-4 md:p-6 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-xl md:rounded-2xl hover:bg-[var(--color-gold)]/20 transition-all mb-6 cursor-pointer"
        >
          <div
            class="w-12 h-12 md:w-14 md:h-14 rounded-full bg-[var(--color-gold)] flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/20 group-hover:scale-110 transition-transform shrink-0"
          >
            <svg
              class="w-5 h-5 md:w-6 md:h-6 text-[var(--color-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 class="text-center sm:text-left">
            <div class="text-[var(--color-gray-500)] text-xs md:text-sm mb-1">
              Позвонить сейчас
            </div>
            <div
              class="text-xl md:text-2xl font-bold text-[var(--color-white)] group-hover:text-[var(--color-gold)] transition-colors"
            >
              {CONTACT_CONSTANTS.phone}
            </div>
          </div>
        </button>

        <!-- Мессенджеры -->
        <div
          class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 sm:gap-4"
        >
          <span class="text-[var(--color-gray-500)] text-sm">Или напишите:</span
          >
          <SocialIcons variant="messenger" />
        </div>
      </div>
    </div>
  </div>
</section>
