---
export interface Props {
    botName?: string;
    telegramLink: string;
    description?: string;
    responseTime?: string;
}

const {
    botName = "Юридический ассистент",
    telegramLink,
    description = "Опишите ситуацию боту — он задаст уточняющие вопросы, соберет необходимые документы и моментально передаст информацию адвокату. Это сократит время приема и подготовит юриста к вашему вопросу.",
    responseTime = "Ответы поступят в Telegram в течение 5 минут"
} = Astro.props;

const features = [
    "Анализ юридической ситуации по вашему описанию",
    "Подготовка пакета документов к визиту",
    "Запись на прием к конкретному специалисту"
];
---

<div class="sticky top-8">
    <div class="group relative bg-white/80 backdrop-blur-xl border border-white/20 rounded-3xl p-8 overflow-hidden shadow-2xl shadow-gray-900/5 hover:shadow-2xl hover:shadow-[var(--color-gold)]/10 transition-all duration-500">
        <!-- Улучшенные декоративные элементы с анимацией -->
        <div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-[var(--color-gold)] to-amber-300 opacity-20 rounded-full blur-3xl -mr-20 -mt-20 animate-pulse"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-[var(--color-blue-primary)] to-blue-400 opacity-20 rounded-full blur-3xl -ml-16 -mb-16 animate-pulse delay-1000"></div>

        <!-- Дополнительный декоративный слой -->
        <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-gold)]/5 via-transparent to-[var(--color-blue-primary)]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <div class="relative z-10">
            <!-- Улучшенная секция с иконкой бота -->
            <div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-5 mb-8">
                <div class="relative">
                    <!-- Фон с анимацией при наведении -->
                    <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-2xl blur opacity-20 group-hover:opacity-40 transition-opacity duration-300"></div>

                    <!-- Иконка бота (робот) вместо лампочки -->
                    <div class="relative w-16 sm:w-18 h-16 sm:h-18 bg-gradient-to-br from-[var(--color-gold)] via-amber-400 to-[var(--color-gold-hover)] rounded-2xl flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/30 transform group-hover:scale-105 group-hover:rotate-1 transition-all duration-300">
                        <svg class="w-7 sm:w-9 h-7 sm:h-9 text-white drop-shadow-md" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
                        </svg>

                        <!-- Мини-иконка Telegram в углу -->
                        <div class="absolute -bottom-1 -right-1 w-5 sm:w-6 h-5 sm:h-6 bg-[#0088cc] rounded-full flex items-center justify-center shadow-md border-2 border-white">
                            <svg class="w-3 sm:w-3.5 h-3 sm:h-3.5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                            </svg>
                        </div>
                    </div>

                    <!-- Пульсирующее кольцо вокруг иконки -->
                    <div class="absolute inset-0 rounded-2xl border-2 border-[var(--color-gold)]/30 animate-ping opacity-0 group-hover:opacity-100"></div>
                </div>

                <div class="flex-1 text-center sm:text-left mt-3 sm:mt-0">
                    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 leading-tight mb-1">{botName}</h2>
                    <div class="flex items-center justify-center sm:justify-start gap-2 bg-green-50 w-fit px-2.5 py-1 rounded-full border border-green-100 mx-auto sm:mx-0">
                        <div class="relative flex h-2 w-2 items-center justify-center">
                            <div class="animate-ping absolute h-full w-full rounded-full bg-green-500 opacity-75"></div>
                            <div class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></div>
                        </div>
                        <span class="text-xs font-semibold text-green-700 uppercase tracking-wide">Онлайн 24/7</span>
                    </div>
                </div>
            </div>

            <!-- Улучшенный заголовок -->
            <div class="mb-6 text-center sm:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center gap-2 justify-center sm:justify-start">
                    <span class="w-1 h-6 bg-gradient-to-b from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full hidden md:block"></span>
                    Предварительная консультация
                </h3>
                <p class="text-sm text-gray-500 font-medium text-center sm:text-left">Через Telegram-бота</p>
            </div>

            <!-- Описание с улучшенным форматированием -->
            <div class="bg-gray-50/80 rounded-2xl p-4 mb-6 border border-gray-100">
                <p class="text-gray-600 leading-relaxed text-[15px]">
                    {description.split('моментально передаст информацию адвокату').map((part, i) =>
                        i === 0 ? part : <><span class="text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/10 to-transparent px-1 rounded">моментально передаст информацию адвокату</span>{part}</>
                    )}
                </p>
            </div>

            <!-- Улучшенный список возможностей с иконками -->
            <ul class="space-y-3.5 mb-8">
                {features.map((feature, index) => (
                        <li class="flex items-start gap-3 text-sm text-gray-700 group/item">
                            <div class="flex-shrink-0 w-5 h-5 rounded-full bg-gradient-to-br from-[var(--color-gold)]/20 to-[var(--color-gold)]/5 flex items-center justify-center mt-0.5 group-hover/item:from-[var(--color-gold)] group-hover/item:to-[var(--color-gold-hover)] transition-colors duration-300">
                                <svg class="w-3 h-3 text-[var(--color-gold)] group-hover/item:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <span class="leading-snug group-hover/item:text-gray-900 transition-colors duration-300">{feature}</span>
                        </li>
                ))}
            </ul>

            <!-- Улучшенная кнопка с эффектами -->
            <div class="relative group/btn">
                <div class="absolute inset-0 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-xl blur opacity-25 group-hover/btn:opacity-50 transition-opacity duration-300"></div>
                <a href={telegramLink} target="_blank" rel="noopener noreferrer"
                   class="relative w-full flex items-center justify-center gap-3 px-8 py-4 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] hover:from-[var(--color-gold-hover)] hover:to-[var(--color-gold)] text-white font-bold rounded-xl transition-all duration-300 shadow-lg shadow-[var(--color-gold)]/30 hover:shadow-xl hover:shadow-[var(--color-gold)]/40 hover:-translate-y-0.5 active:translate-y-0">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                    </svg>
                    <span class="text-sm sm:text-base">Начать диалог с ботом</span>
                    <svg class="w-5 h-5 group-hover/btn:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>

            <!-- Улучшенный футер с временем ответа -->
            <div class="mt-5 flex items-center justify-center gap-2 text-xs text-gray-500 bg-gray-50 rounded-lg py-2 px-3 border border-gray-100">
                <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="font-medium">{responseTime}</span>
            </div>
        </div>
    </div>
</div>