---
export interface Service {
  title: string;
  description: string;
  icon?: string;
  emoji?: string;
  price: string;
  duration?: string;
  cases?: number;
  color?: string;
  popular?: boolean;
  result?: string;
  urgent?: boolean;
}

interface Props {
  services: Service[];
  sectionId?: string;
  title?: string;
  subtitle?: string;
  description?: string;
  bgColor?: 'navy' | 'navy-dark' | 'gray' | 'white';
  accentColor?: 'gold' | 'blue' | 'green' | 'red';
  showResults?: boolean;
  showUrgentBadge?: boolean;
}

const {
  services,
  sectionId = 'services',
  title = 'Наши услуги',
  subtitle,
  description,
  bgColor = 'navy',
  accentColor = 'gold',
  showResults = false,
  showUrgentBadge = false
} = Astro.props;

// Определение цветовых схем в зависимости от фона
const bgClasses = {
  navy: 'bg-[var(--color-navy)]',
  'navy-dark': 'bg-[var(--color-navy-dark)]',
  gray: 'bg-gray-50',
  white: 'bg-white'
};

const cardBgClasses = {
  navy: 'bg-[var(--color-navy-dark)]',
  'navy-dark': 'bg-[var(--color-navy)]',
  gray: 'bg-white',
  white: 'bg-gray-50'
};

const textClasses = {
  navy: 'text-[var(--color-white)]',
  'navy-dark': 'text-[var(--color-white)]',
  gray: 'text-gray-900',
  white: 'text-gray-900'
};

const textColorClasses = {
  navy: 'text-[var(--color-gray-500)]',
  'navy-dark': 'text-[var(--color-gray-500)]',
  gray: 'text-gray-600',
  white: 'text-gray-600'
};

const accentClasses = {
  gold: '[var(--color-gold)]',
  blue: '[var(--color-blue-primary)]',
  green: '[var(--color-green-primary)]',
  red: '[var(--color-red-primary)]'
};

const borderColorClasses = {
  navy: '[var(--color-gray-600)]/10',
  'navy-dark': '[var(--color-gray-600)]/10',
  gray: 'gray-200',
  white: 'gray-200'
};

const gradientClasses = {
  gold: 'from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20',
  blue: 'from-[var(--color-blue-primary)]/20 to-[var(--color-blue-secondary)]/20',
  green: 'from-[var(--color-green-primary)]/20 to-[var(--color-green-secondary)]/20',
  red: 'from-[var(--color-red-primary)]/20 to-[var(--color-red-secondary)]/20'
};

const urgentBorderColor = 'border-red-500/30 hover:border-red-500/60';
const urgentShadow = 'hover:shadow-red-500/10';
const normalBorderColor = `[var(--color-gray-600)]/20 hover:border-${accentClasses[accentColor]}/50`;
const normalShadow = `hover:shadow-${accentClasses[accentColor]}/10`;

const urgentIconBg = 'bg-red-500/10';
const urgentIconText = 'text-red-400';
const normalIconBg = `${accentClasses[accentColor]}/10`;
const normalIconText = accentClasses[accentColor];

const resultBg = (isUrgent: boolean) => isUrgent ? 'bg-red-500/10 border border-red-500/20' : 'bg-green-500/10 border border-green-500/20';
const resultText = (isUrgent: boolean) => isUrgent ? 'text-red-400' : 'text-green-400';
const resultIcon = (isUrgent: boolean) => isUrgent ? 'text-red-400' : 'text-green-400';
---

<section id={sectionId} class={`py-16 md:py-24 ${bgClasses[bgColor]} relative overflow-hidden`}>
  <!-- Фоновые элементы -->
  {bgColor === 'navy' && (
    <>
      <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-1/4 right-0 w-96 h-96 bg-[var(--color-gold)] opacity-[0.02] rounded-full blur-3xl"></div>
      <div class="absolute bottom-1/4 left-0 w-96 h-96 bg-[var(--color-gold)] opacity-[0.02] rounded-full blur-3xl"></div>
    </>
  )}

  {bgColor === 'navy-dark' && (
    <>
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent opacity-30"></div>
      <div class="absolute top-20 right-0 w-72 h-72 bg-[var(--color-gold)] opacity-[0.02] rounded-full blur-3xl"></div>
      <div class="absolute bottom-20 left-0 w-96 h-96 bg-[var(--color-blue-primary)] opacity-[0.02] rounded-full blur-3xl"></div>
    </>
  )}

  {bgColor === 'gray' && (
    <>
      <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-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl"></div>
    </>
  )}

  <div class="container mx-auto px-4 md:px-8 lg:px-16">
    {/* Заголовок секции */}
    <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16">
      {subtitle && (
        <span class={`inline-block px-4 py-2 bg-${accentClasses[accentColor]}/10 border border-${accentClasses[accentColor]}/20 rounded-full text-${accentClasses[accentColor]} text-xs font-bold uppercase tracking-wider mb-4 md:mb-6`}>
          {subtitle}
        </span>
      )}
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-white)] mb-4 md:mb-6">
        <span set:html={title} />
      </h2>
      {description && (
        <p class={`text-${accentClasses[accentColor]}/60 text-base md:text-lg`}>
          {description}
        </p>
      )}
    </div>

    {/* Сетка карточек */}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {services.map((service, index) => (
        <div class={`group relative border ${service.urgent ? urgentBorderColor : normalBorderColor} rounded-2xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl ${service.urgent ? urgentShadow : normalShadow} ${service.popular ? 'ring-1 ring-[var(--color-gold)] ring-offset-2 ring-offset-[var(--color-navy-dark)]' : ''}`}>

          {/* Метка срочности */}
          {service.urgent && showUrgentBadge && (
            <div class="absolute -top-3 left-6 px-3 py-1 bg-red-500 text-white text-xs font-bold uppercase rounded-full animate-pulse">
              Требует срочности
            </div>
          )}
          
          {/* Популярный бейдж */}
          {service.popular && (
            <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-[var(--color-gold)] text-[var(--color-white)] text-xs font-bold uppercase tracking-wider rounded-full shadow-lg">
              Популярное
            </div>
          )}
          
          {/* Градиентный оверлей при hover */}
          {service.color && !service.urgent && (
            <div class={`absolute inset-0 bg-gradient-to-br ${gradientClasses[accentColor]} opacity-0 group-hover:opacity-100 transition-opacity duration-500`}></div>
          )}

          <div class="relative p-6">
            {/* Иконка или эмодзи */}
            <div class="flex justify-center md:justify-start mb-4">
              {service.emoji ? (
                <div class={`w-12 h-12 rounded-xl ${service.urgent ? urgentIconBg : normalIconBg} flex items-center justify-center mb-4 text-2xl group-hover:scale-110 group-hover:bg-[var(--color-gold)]/10 group-hover:border-[var(--color-gold)]/30 transition-all duration-300`}>
                  {service.emoji}
                </div>
              ) : (
                <div class={`w-12 h-12 rounded-xl ${service.urgent ? urgentIconBg : normalIconBg} flex items-center justify-center group-hover:bg-[var(--color-gold)] group-hover:border-[var(--color-gold)] transition-all duration-300`}>
                  <svg class={`w-6 h-6 ${service.urgent ? urgentIconText : normalIconText}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={service.icon}></path>
                  </svg>
                </div>
              )}
            </div>

            {/* Контент */}
            <h3 class="text-xl font-bold text-[var(--color-white)] mb-2 group-hover:text-[var(--color-gold)] transition-colors">
              {service.title}
            </h3>
            <p class="text-[var(--color-gray-500)] text-sm mb-4 line-clamp-2 group-hover:text-[var(--color-gray-400)] transition-colors">
              {service.description}
            </p>

            {/* Результат */}
            {showResults && service.result && (
              <div class={`p-3 rounded-lg ${resultBg(!!service.urgent)} mb-4`}>
                <div class="flex items-center gap-2">
                  <svg class={`w-4 h-4 ${resultIcon(!!service.urgent)}`} 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 class={`text-sm font-bold ${resultText(!!service.urgent)}`}>{service.result}</span>
                </div>
              </div>
            )}

            {/* Цена и кнопка */}
            <div class="flex items-center justify-between pt-4 border-t border-[var(--color-gray-600)]/10">
              <div>
                <span class="text-xs text-[var(--color-gray-500)] block mb-1">Стоимость</span>
                <span class="text-lg font-black text-[var(--color-gold)]">{service.price}</span>
              </div>
              <button class={`px-4 py-2 rounded-lg font-bold text-sm transition-all ${service.urgent ? 'bg-red-500 hover:bg-red-600 text-white' : 'bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-navy)]'}`}>
                {service.urgent ? 'Получить защиту' : 'Подробнее'}
              </button>
            </div>
          </div>

          {/* Раскрывающаяся часть */}
          {!service.urgent && (
            <div class="max-h-0 group-hover:max-h-24 transition-all duration-500 overflow-hidden bg-[var(--color-navy)]/50">
              <div class="p-6 pt-0">
                <button data-consultation-modal class="w-full py-3 bg-[var(--color-gold)]/10 hover:bg-[var(--color-gold)]/20 border border-[var(--color-gold)]/20 rounded-lg text-[var(--color-gold)] text-sm font-medium transition-colors cursor-pointer">
                  Получить консультацию
                </button>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  </div>
</section>