---
const pricingPlans = [
  {
    name: "Консультация",
    price: "Бесплатно",
    period: "30 минут",
    description: "Первичный анализ ситуации",
    features: [
      "Анализ документов",
      "Оценка перспектив дела",
      "Консультация по стратегии",
      "Ответы на вопросы"
    ],
    highlighted: false
  },
  {
    name: "Представительство",
    price: "от 30 000 ₽",
    period: "за этап",
    description: "Ведение дела в арбитражном суде",
    features: [
      "Подготовка искового заявления",
      "Участие в судебных заседаниях",
      "Представление доказательств",
      "Получение решения суда"
    ],
    highlighted: true
  },
  {
    name: "Комплексное ведение",
    price: "от 100 000 ₽",
    period: "за дело",
    description: "Полное сопровождение дела",
    features: [
      "Все инстанции (первая + апелляция + кассация)",
      "Исполнительное производство",
      "Приставы и банки",
      "Гарантия результата"
    ],
    highlighted: false
  }
];
---

<section class="py-24 bg-[var(--color-navy)] relative overflow-hidden">
  <!-- Декоративные элементы -->
  <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/30 to-transparent"></div>
  
  <!-- Фоновые элементы -->
  <div class="absolute top-[30%] right-[10%] w-[350px] h-[350px] bg-[var(--color-gold)]/3 rounded-full blur-[100px]"></div>
  <div class="absolute bottom-[30%] left-[10%] w-[300px] h-[300px] bg-[var(--color-blue-primary)]/3 rounded-full blur-[80px]"></div>

  <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
    <!-- Заголовок секции -->
    <div class="text-center mb-16">
      <span class="inline-block px-4 py-2 bg-[var(--color-gold)]/5 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-[0.2em] mb-6">
        Прозрачные условия
      </span>
      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-white)] mb-6">
        СТОИМОСТЬ<br />
        <span class="text-[var(--color-gold)]">УСЛУГ</span>
      </h2>
      <p class="text-[var(--color-gray-500)] text-lg max-w-2xl mx-auto">
        Фиксированные тарифы без скрытых платежей
      </p>
    </div>

    <!-- Карточки тарифов -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
      {pricingPlans.map((plan, index) => (
        <div
          class={`relative p-8 rounded-xl ${
            plan.highlighted
              ? 'bg-[var(--color-gold)] text-[var(--color-white)] transform md:-translate-y-4'
              : 'bg-[var(--color-navy-dark)] text-[var(--color-white)]'
          } border ${
            plan.highlighted
              ? 'border-[var(--color-gold)] shadow-[0_0_40px_rgba(191,155,88,0.3)]'
              : 'border-[var(--color-gray-600)]/10'
          } transition-all duration-500 hover:-translate-y-2`}
        >
          <!-- Бейдж для выделенного тарифа -->
          {plan.highlighted && (
            <div class="absolute -top-4 left-1/2 -translate-x-1/2">
              <div class="px-4 py-1 bg-[var(--color-navy)] text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider rounded-full">
                Популярный
              </div>
            </div>
          )}

          <!-- Название тарифа -->
          <h3 class={`text-xl font-bold mb-2 ${plan.highlighted ? 'text-[var(--color-navy)]' : 'text-[var(--color-white)]'}`}>
            {plan.name}
          </h3>

          <!-- Описание -->
          <p class={`text-sm mb-6 ${plan.highlighted ? 'text-[var(--color-navy)]/70' : 'text-[var(--color-gray-500)]'}`}>
            {plan.description}
          </p>

          <!-- Цена -->
          <div class="mb-6">
            <div class={`text-3xl font-black mb-1 ${plan.highlighted ? 'text-[var(--color-navy)]' : 'text-[var(--color-gold)]'}`}>
              {plan.price}
            </div>
            <div class={`text-xs ${plan.highlighted ? 'text-[var(--color-navy)]/70' : 'text-[var(--color-gray-500)]'}`}>
              {plan.period}
            </div>
          </div>

          <!-- Разделитель -->
          <div class={`h-px mb-6 ${plan.highlighted ? 'bg-[var(--color-navy)]/20' : 'bg-[var(--color-gray-600)]/20'}`}></div>

          <!-- Список услуг -->
          <ul class="space-y-3 mb-8">
            {plan.features.map((feature) => (
              <li class={`flex items-start gap-3 text-sm ${plan.highlighted ? 'text-[var(--color-navy)]' : 'text-[var(--color-gray-400)]'}`}>
                <svg class={`w-5 h-5 flex-shrink-0 ${plan.highlighted ? 'text-[var(--color-navy)]' : 'text-[var(--color-gold)]'}`} 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>
                <span>{feature}</span>
              </li>
            ))}
          </ul>

          <!-- Кнопка -->
          <a
            href="#contact"
            class={`block w-full py-4 text-center font-bold text-sm uppercase tracking-wider transition-all rounded-lg ${
              plan.highlighted
                ? 'bg-[var(--color-navy)] text-[var(--color-white)] hover:bg-[var(--color-navy-dark)]'
                : 'bg-[var(--color-gold)] text-[var(--color-white)] hover:bg-[var(--color-gold-hover)]'
            }`}
          >
            Выбрать тариф
          </a>
        </div>
      ))}
    </div>

    <!-- Примечание снизу -->
    <div class="mt-12 text-center">
      <p class="text-[var(--color-gray-500)] text-sm">
        * Окончательная стоимость зависит от сложности дела и определяется после консультации
      </p>
    </div>
  </div>
</section>
