---
export interface Props {
    title?: string;
    subtitle?: string;
    highlightText?: string;
}

const {
    title = "Контакты",
    subtitle = "Нужна юридическая помощь? Свяжитесь напрямую или доверьте предварительный анализ нашему",
    highlightText = "AI-ассистенту"
} = Astro.props;
---

<div class="text-center mb-16 sm:mb-20 lg:mb-28 relative">
    <!-- Декоративные элементы -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[200px] bg-gradient-to-r from-[var(--color-gold)]/20 via-[var(--color-blue-primary)]/20 to-[var(--color-gold)]/20 blur-3xl -z-10 opacity-50"></div>

    <!-- Заголовок в стиле страницы кейсов -->
    <div class="mb-12 max-w-3xl mx-auto">
        <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 mx-auto w-fit">
            <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
            Наши координаты
        </div>

        <h1 class="text-3xl sm:text-4xl md:text-6xl lg:text-8xl font-bold tracking-tight text-gray-900 mb-6 relative inline-block">
            {title}
            <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>

        <p class="text-gray-600 text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed font-light max-w-2xs sm:max-w-3xl mx-auto">
            {subtitle}
            <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>
        </p>
    </div>
</div>