---
import { PRACTICE_START_YEAR } from "@constants/constants.ts";
import { getYearDeclension } from "@utils/stats.utils.ts";

interface Props {
  backgroundImage?: string;
}

const { backgroundImage = "/images/home/hero/heroImg.avif" } = Astro.props;

const currentYear = new Date().getFullYear();
const yearsOfPractice = currentYear - PRACTICE_START_YEAR;
const yearDeclension = getYearDeclension(yearsOfPractice);
---

<section
  class="group relative w-full min-h-screen flex items-center overflow-hidden bg-[var(--color-navy)]"
>
  <!-- 1. ФОНОВОЕ ИЗОБРАЖЕНИЕ с эффектом проявления -->
  <div class="absolute inset-0 z-0">
    <img
      src={backgroundImage}
      alt="Адвокат Сургута"
      width="1920"
      height="1080"
      class="w-full h-full object-cover object-center
                   opacity-40 mix-blend-overlay
                   transition-all duration-1000 ease-out
                   group-hover:opacity-100 group-hover:mix-blend-normal group-hover:scale-105"
    />
    <!-- Градиенты (становятся светлее при наведении) -->
    <div
      class="absolute inset-0 bg-gradient-to-r from-[var(--color-navy)] via-[var(--color-navy)]/60 to-[var(--color-navy)]/30 transition-all duration-1000 group-hover:via-[var(--color-navy)]/40 group-hover:to-[var(--color-navy)]/20"
    >
    </div>
    <div
      class="absolute inset-0 bg-gradient-to-l from-[var(--color-navy)] via-[var(--color-navy)]/60 to-[var(--color-navy)]/30 transition-all duration-1000 group-hover:via-[var(--color-navy)]/40 group-hover:to-[var(--color-navy)]/20"
    >
    </div>
    <div
      class="absolute inset-0 bg-gradient-to-t from-[var(--color-navy)] via-transparent to-transparent opacity-60 transition-opacity duration-1000 group-hover:opacity-40"
    >
    </div>
  </div>

  <!-- Декоративный элемент (без мерцания, статичный) -->
  <div
    class="absolute bottom-1/4 left-1/4 w-64 h-64 bg-[var(--color-blue-primary)] opacity-10 rounded-full blur-3xl pointer-events-none transition-opacity duration-1000 group-hover:opacity-20"
  >
  </div>

  <!-- 2. КОНТЕНТ -->
  <div class="relative z-10 w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl py-32">
    <div class="max-w-3xl text-center lg:text-left">
      <!-- Бейдж -->
      <div
        class="inline-flex items-center gap-3 px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full mb-8"
      >
        <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full"></span>
        <span
          class="text-[var(--color-gold)] text-[10px] md:text-xs font-bold uppercase tracking-[0.2em]"
        >
          Юридическая защита
        </span>
      </div>

      <!-- Главный заголовок -->
      <h1
        class="text-white text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] mb-8 uppercase tracking-tight drop-shadow-2xl"
      >
        Лучший адвокат в <br />
        <span
          class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] italic font-serif"
          >Сургуте</span
        >
      </h1>

      <!-- Описание -->
      <p
        class="text-gray-200 text-lg md:text-xl leading-relaxed mb-12 max-w-2xl border-l-0 md:border-l-4 border-[var(--color-gold)] pl-0 md:pl-6 transition-colors duration-700 group-hover:text-white text-center lg:text-left"
      >
        Высококвалифицированная правовая поддержка по самым сложным делам.
        {yearsOfPractice}
        {yearDeclension} безупречной репутации и сотни выигранных процессов в судах
        ХМАО - Югры.
      </p>

      <!-- Кнопки -->
      <div
        class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center lg:items-start"
      >
        <a
          href="#contact"
          class="group/btn relative px-8 py-4 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-[var(--color-gold)]/30 hover:shadow-xl hover:shadow-[var(--color-gold)]/40 transition-all duration-300 hover:-translate-y-0.5"
        >
          <span class="relative z-10 flex items-center gap-2">
            Записаться на прием
            <svg
              class="w-5 h-5 transform group-hover/btn: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>
          </span>
        </a>

        <a
          href="#services"
          class="group/btn px-8 py-4 bg-white/10 backdrop-blur-md border border-white/30 text-white font-bold rounded-xl hover:bg-white/20 transition-all duration-300 hover:-translate-y-0.5"
        >
          <span class="flex items-center gap-2">
            Направления практики
            <svg
              class="w-5 h-5 transform group-hover/btn: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="M19 9l-7 7-7-7"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>

  <!-- Индикатор прокрутки -->
  <div
    class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/50 text-xs font-medium tracking-widest uppercase opacity-0 transition-opacity duration-1000 group-hover:opacity-100"
  >
    <span>Прокрутите</span>
    <svg
      class="w-4 h-4 animate-bounce"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
    </svg>
  </div>
</section>
