---
import { CURRENT_YEAR } from '@constants/constants.ts';

// FeaturedCase.astro — Гражданское дело о защите прав потребителя
// Все данные инкапсулированы внутри компонента, пропсы удалены
---

<section class="py-16 px-4">
  <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
    <div class="flex items-center gap-4 mb-8">
      <div
        class="w-12 h-12 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-xl flex items-center justify-center shadow-lg"
      >
        <svg
          class="w-6 h-6 text-white"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"
          ></path>
        </svg>
      </div>
      <h2 class="text-3xl font-bold text-gray-900">Дело месяца</h2>
    </div>

    <div
      class="relative bg-gradient-to-br from-[var(--color-navy)] to-[#1e293b] rounded-3xl overflow-hidden shadow-2xl"
    >
      <div class="grid grid-cols-1 lg:grid-cols-2">
        <!-- Изображение/Визуал -->
        <div class="relative h-64 lg:h-auto overflow-hidden">
          <img
            src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=2000"
            alt="Недвижимость и строительство"
            class="w-full h-full object-cover opacity-60 mix-blend-overlay"
          />
          <div
            class="absolute inset-0 bg-gradient-to-r from-[var(--color-navy)] via-transparent to-transparent lg:bg-gradient-to-r lg:from-transparent lg:to-[var(--color-navy)]"
          >
          </div>

          <!-- Год дела -->
          <div
            class="absolute top-6 left-6 bg-white/10 backdrop-blur border border-white/20 rounded-full px-4 py-2"
          >
            <span class="text-white font-bold">{CURRENT_YEAR}</span>
          </div>
        </div>

        <!-- Контент -->
        <div class="p-8 lg:p-12 flex flex-col justify-center">
          <div
            class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-400 text-xs font-bold uppercase tracking-wider w-fit mb-6"
          >
            <span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span>
            Гражданское право • Защита прав потребителей
          </div>

          <h3
            class="text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight"
          >
            Взыскание неустойки с застройщика и компенсация морального вреда
          </h3>

          <p class="text-gray-300 leading-relaxed mb-8">
            Дольщики многоквартирного дома обратились с иском к застройщику,
            систематически нарушавшему сроки сдачи объекта. В ходе досудебной
            претензионной работы и судебного разбирательства доказаны факты
            грубого нарушения договорных обязательств. Достигнуто положительное
            решение для 47 семей с полным возмещением убытков.
          </p>

          <div class="grid grid-cols-2 gap-6 mb-8">
            <div
              class="bg-white/5 backdrop-blur border border-white/10 rounded-xl p-4"
            >
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-1">
                Результат
              </div>
              <div class="text-green-400 font-bold text-lg">
                Полное удовлетворение иска
              </div>
            </div>
            <div
              class="bg-white/5 backdrop-blur border border-white/10 rounded-xl p-4"
            >
              <div class="text-xs text-gray-400 uppercase tracking-wider mb-1">
                Взыскано
              </div>
              <div class="text-[var(--color-gold)] font-bold text-lg">
                ₽18.4 млн + неустойка
              </div>
            </div>
          </div>

          <button
            class="flex items-center gap-3 text-white font-bold group hover:text-[var(--color-gold)] transition-colors"
          >
            <span>Изучить детали дела</span>
            <div
              class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center group-hover:border-[var(--color-gold)] group-hover:bg-[var(--color-gold)] transition-all"
            >
              <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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </div>
          </button>
        </div>
      </div>

      <!-- Декоративные линии -->
      <div
        class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-gold)] via-[var(--color-gold-hover)] to-transparent"
      >
      </div>
    </div>
  </div>
</section>
