---
interface Props {
  title: string;
  subtitle?: string;
  badgeText?: string;
  highlightText?: string;
  highlightInTitle?: boolean; // Если true, то highlightText будет частью заголовка, иначе - частью subtitle
  centered?: boolean;
  titleColor?: 'white' | 'gray-900'; // Цвет заголовка, по умолчанию 'white' для темных фонов и 'gray-900' для светлых
  subtitleColor?: 'gray-400' | 'gray-600'; // Цвет подзаголовка
  highlightInSubtitle?: boolean; // Если true, то highlightText будет частью подзаголовка с особым оформлением
  contactsFormat?: boolean; // Если true, то используется специальный формат для контактов с выделением в подзаголовке
  titleSize?: 'normal' | 'large'; // Размер заголовка: normal (text-4xl md:text-5xl) или large (text-3xl sm:text-4xl md:text-6xl lg:text-8xl)
}

const {
  title,
  subtitle,
  badgeText = "Мнение клиентов",
  highlightText,
  highlightInTitle = true, // по умолчанию highlightText будет частью заголовка
  centered = true,
  titleColor = 'white',
  subtitleColor = 'gray-400',
  highlightInSubtitle = false,
  contactsFormat = false,
  titleSize = 'large'
} = Astro.props;

// Определение классов цветов
const titleTextColor = titleColor === 'white' ? '[var(--color-white)]' : 'gray-900';
const subtitleTextColor = subtitleColor === 'gray-400' ? '[var(--color-gray-400)]' : 'gray-600';
---

<div class={`mb-12 ${centered ? 'text-center' : ''}`}>
  {badgeText && (
    <div class="flex items-center justify-center gap-2 px-4 py-2 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider mb-6 w-fit mx-auto">
      <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
      {badgeText}
    </div>
  )}
  
  {highlightInTitle ? (
    <h1 class={`${titleSize === 'large' ? 'text-3xl sm:text-4xl md:text-6xl lg:text-8xl' : 'text-4xl md:text-5xl'} font-bold tracking-tight text-${titleTextColor} mb-6 relative inline-block`}>
      {title}
      {highlightText && <span class="text-[var(--color-gold)]">{highlightText}</span>}
      {titleSize === 'large' && (
        <span class="absolute -bottom-3 sm:-bottom-4 left-1/2 -translate-x-1/2 w-16 sm:w-24 h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent rounded-full"></span>
      )}
    </h1>
  ) : (
    <h1 class={`${titleSize === 'large' ? 'text-3xl sm:text-4xl md:text-6xl lg:text-8xl' : 'text-4xl md:text-5xl'} font-bold tracking-tight text-${titleTextColor} mb-6 relative inline-block`}>
      {title}
      {titleSize === 'large' && (
        <span class="absolute -bottom-3 sm:-bottom-4 left-1/2 -translate-x-1/2 w-16 sm:w-24 h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent rounded-full"></span>
      )}
    </h1>
  )}

  {subtitle && (
    <p class={`text-${subtitleTextColor} ${centered ? 'max-w-2xs sm:max-w-3xl mx-auto' : ''} text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed font-light`}>
      {subtitle}
      {contactsFormat && !highlightInTitle && highlightText ? (
        <span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
          <span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
            {highlightText}
          </span>
        </span>
      ) : (!highlightInTitle && highlightText && highlightInSubtitle) ? (
        <span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
          <span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
            {highlightText}
          </span>
        </span>
      ) : (!highlightInTitle && highlightText && !highlightInSubtitle) ? (
        <span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
          <span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
            {highlightText}
          </span>
        </span>
      ) : null}
    </p>
  )}
</div>