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

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

const {
  title = "Защита по административным делам",
  subtitle = "Профессиональная помощь при привлечении к административной ответственности. Обжалование постановлений, защита прав в судах, сопровождение на всех этапах.",
} = Astro.props;
---

<section
  class="relative min-h-[90vh] flex flex-col justify-center lg:items-center overflow-hidden bg-[var(--color-navy)]"
>
  <!-- Фон -->
  <div class="absolute inset-0 z-0">
    <img
      src="https://images.unsplash.com/photo-1589829085413-56de8ae18c73?q=80&w=2000&auto=format&fit=crop"
      alt="Административные дела"
      class="w-full h-full object-cover opacity-10 scale-110 animate-slow-zoom"
    />
    <div
      class="absolute inset-0 bg-gradient-to-br from-[var(--color-navy)] via-[var(--color-navy)]/95 to-[var(--color-navy-dark)]"
    >
    </div>
    <!-- Тонкая сетка -->
    <div
      class="absolute inset-0 opacity-[0.03]"
      style="background-image: radial-gradient(circle at 1px 1px, var(--color-gold) 1px, transparent 0); background-size: 40px 40px;"
    >
    </div>
  </div>

  <!-- Декоративные элементы -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-1/4 right-1/4 w-[500px] h-[500px] bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-[120px]"
    >
    </div>
    <div
      class="absolute bottom-1/4 left-1/4 w-[400px] h-[400px] bg-[var(--color-blue-primary)] opacity-[0.03] rounded-full blur-[100px]"
    >
    </div>
  </div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 pt-20">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <!-- Левая колонка -->
      <div class="max-w-2xl text-center lg:text-left">
        <!-- Тег -->
        <div
          class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/10 border border-green-500/20 rounded-full text-green-400 text-xs font-bold uppercase tracking-wider mb-8"
        >
          <span class="relative flex h-2 w-2">
            <span
              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
            ></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"
            ></span>
          </span>
          Авторист в Сургуте
        </div>

        <h1
          class="text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-white)] leading-[1.1] mb-6"
        >
          {
            title.split(" ").map((word, i) =>
              i === 1 || i === 2 ? (
                <span class="text-[var(--color-gold)] relative inline-block">
                  {word}
                  <span class="absolute -bottom-2 left-0 w-full h-[2px] bg-[var(--color-gold)]/30 rounded-full" />
                </span>
              ) : (
                <span>{word} </span>
              ),
            )
          }
        </h1>

        <p
          class="text-[var(--color-gray-400)] text-lg md:text-xl leading-relaxed mb-10 border-l-4 border-[var(--color-gold)] pl-6"
        >
          {subtitle}
        </p>

        <div class="flex flex-col sm:flex-row 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_30px_rgba(191,155,88,0.3)] hover:-translate-y-1 cursor-pointer"
          >
            <span
              class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"
            ></span>
            <span class="relative flex items-center justify-center gap-3">
              <svg
                class="w-5 h-5"
                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>
          <a
            href="#services"
            class="group px-8 py-4 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/30 text-[var(--color-white)] font-bold rounded-xl hover:bg-[var(--color-navy-darker)] hover:border-[var(--color-gold)]/30 transition-all flex items-center justify-center gap-2"
          >
            Услуги
            <svg
              class="w-4 h-4 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
        </div>

        <!-- Статистика -->
        <div class="flex gap-8 pt-8 border-t border-[var(--color-gray-600)]/20">
          <div>
            <div class="text-2xl font-bold text-[var(--color-gold)]">500+</div>
            <div class="text-sm text-[var(--color-gray-500)]">Дел выиграно</div>
          </div>
          <div>
            <div class="text-2xl font-bold text-[var(--color-gold)]">10+</div>
            <div class="text-sm text-[var(--color-gray-500)]">Лет опыта</div>
          </div>
          <div>
            <div class="text-2xl font-bold text-[var(--color-gold)]">98%</div>
            <div class="text-sm text-[var(--color-gray-500)]">Успешных дел</div>
          </div>
        </div>
      </div>

      <!-- Правая колонка -->
      <div class="hidden lg:block relative">
        <div
          class="absolute -inset-1 bg-[var(--color-gold)] rounded-3xl blur opacity-20"
        >
        </div>
        <div
          class="relative bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-3xl p-8 shadow-2xl"
        >
          <div class="flex items-center gap-4 mb-8">
            <div
              class="w-14 h-14 bg-[var(--color-gold)] rounded-2xl flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/20"
            >
              <svg
                class="w-7 h-7 text-[var(--color-white)]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                ></path>
              </svg>
            </div>
            <div>
              <h2 class="text-[var(--color-white)] font-bold text-xl">
                Срочная помощь
              </h2>
              <p class="text-[var(--color-gray-500)] text-sm">
                Ответим за 15 минут
              </p>
            </div>
          </div>

          <ul class="space-y-4 mb-8">
            <li class="flex items-start gap-3 group">
              <span
                class="w-6 h-6 rounded-lg bg-[var(--color-emerald-500)]/20 text-[var(--color-emerald-400)] flex items-center justify-center text-xs font-bold flex-shrink-0"
                >1</span
              >
              <span class="text-[var(--color-gray-400)] text-sm"
                >Не слушайте инспектора ДПС</span
              >
            </li>
            <li class="flex items-start gap-3 group">
              <span
                class="w-6 h-6 rounded-lg bg-[var(--color-emerald-500)]/20 text-[var(--color-emerald-400)] flex items-center justify-center text-xs font-bold flex-shrink-0"
                >2</span
              >
              <span class="text-[var(--color-gray-400)] text-sm"
                >Не признавайте вину в нарушении ПДД</span
              >
            </li>
            <li class="flex items-start gap-3 group">
              <span
                class="w-6 h-6 rounded-lg bg-[var(--color-emerald-500)]/20 text-[var(--color-emerald-400)] flex items-center justify-center text-xs font-bold flex-shrink-0"
                >2</span
              >
              <span class="text-[var(--color-gray-400)] text-sm"
                >Сделайте запись в протоколе - "ПДД не нарушал"</span
              >
            </li>
          </ul>

          <div
            class="bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-xl p-4"
          >
            <div class="flex items-center justify-between">
              <div>
                <span
                  class="text-[var(--color-gold)] text-xs uppercase tracking-wider block mb-1"
                  >Бесплатно</span
                >
                <span class="text-[var(--color-white)] font-bold"
                  >Первая консультация</span
                >
              </div>
              <div
                class="w-10 h-10 rounded-full bg-[var(--color-gold)]/20 flex items-center justify-center"
              >
                <svg
                  class="w-5 h-5 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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes slow-zoom {
    0%,
    100% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1.15);
    }
  }
  .animate-slow-zoom {
    animation: slow-zoom 20s ease-in-out infinite;
  }
  
  /* Центрирование заголовка на мобильных устройствах */
  @media (max-width: 767px) {
    h1 {
      text-align: center;
    }
  }
  
  /* Центрирование блока "Авторист в Сургуте" и добавление отступа сверху на мобильных устройствах */
  @media (max-width: 767px) {
    .container > div:first-child > div:first-child > div:first-child {
      text-align: center;
      margin-top: 2rem; /* Увеличиваем отступ сверху */
    }
  }
</style>
