---
export interface Props {
    // Тексты и ссылки
    title?: string;
    description?: string;
    primaryBtnText?: string;
    primaryBtnLink?: string;
    secondaryBtnText?: string;
    secondaryBtnLink?: string;

    // Цвета фона
    bgColor?: string;           // Основной фон секции (tailwind класс или hex)
    gridOpacity?: number;       // Прозрачность сетки (0-1)

    // Стили primary кнопки
    primaryBtnBg?: string;      // Фон кнопки
    primaryBtnHover?: string;   // Фон при наведении
    primaryBtnTextColor?: string; // Цвет текста

    // Стили secondary кнопки
    secondaryBtnBg?: string;    // Фон кнопки
    secondaryBtnHover?: string; // Фон при наведении
    secondaryBtnTextColor?: string; // Цвет текста
    secondaryBtnBorder?: string; // Цвет бордера (опционально)

    // Дополнительно
    showGrid?: boolean;         // Показывать сетку?
    gradientOverlay?: boolean;  // Градиент сверху?
    rounded?: string;           // Скругление углов
}

const {
    // Контент
    title = "Нужна помощь эксперта?",
    description = "Запишитесь на первичную консультацию, и мы вместе найдем выход из вашей юридической ситуации.",
    primaryBtnText = "Записаться на прием",
    primaryBtnLink = "#",
    secondaryBtnText = "Связаться в Telegram",
    secondaryBtnLink = "#",

    // Цвета по умолчанию (как в оригинале)
    bgColor = "bg-[#444ce7]",
    gridOpacity = 0.1,

    // Primary кнопка (золотая по умолчанию)
    primaryBtnBg = "bg-[#cbb059]",
    primaryBtnHover = "hover:bg-[#bfa34d]",
    primaryBtnTextColor = "text-[#1a1f2e]",

    // Secondary кнопка (полупрозрачная по умолчанию)
    secondaryBtnBg = "bg-[#565df0]",
    secondaryBtnHover = "hover:bg-[#646af3]",
    secondaryBtnTextColor = "text-white",
    secondaryBtnBorder = "border-white/20",

    // Оформление
    showGrid = true,
    gradientOverlay = true,
    rounded = "rounded-3xl"
} = Astro.props;
---

<div class={`relative w-full ${bgColor} ${rounded} overflow-hidden shadow-2xl my-8`}>

    {/* Декоративная сетка */}
    {showGrid && (
            <div
                    class="absolute inset-0 pointer-events-none"
                    style={`opacity: ${gridOpacity}; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 40px 40px;`}
            >
            </div>
    )}

    {/* Градиент */}
    {gradientOverlay && (
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/10 pointer-events-none"></div>
    )}

    {/* Контент */}
    <div class="relative z-10 py-12 px-6 md:py-16 md:px-12 text-center">
        <h3 class="text-2xl md:text-4xl font-bold text-white mb-4">
            {title}
        </h3>

        <p class="text-white/80 text-sm md:text-base max-w-2xl mx-auto mb-10 leading-relaxed">
            {description}
        </p>

        <div class="flex flex-col sm:flex-row justify-center gap-4">
            {/* Primary кнопка */}
            <a
                    href={primaryBtnLink}
                    class={`${primaryBtnBg} ${primaryBtnHover} ${primaryBtnTextColor} font-bold py-3 px-8 rounded-lg transition-all duration-300 shadow-lg inline-block text-center hover:-translate-y-0.5`}
            >
                {primaryBtnText}
            </a>

            {/* Secondary кнопка */}
            <a
                    href={secondaryBtnLink}
                    class={`${secondaryBtnBg} ${secondaryBtnHover} ${secondaryBtnTextColor} border ${secondaryBtnBorder} font-semibold py-3 px-8 rounded-lg transition-all duration-300 flex items-center justify-center gap-2 hover:-translate-y-0.5`}
            >
                {secondaryBtnText}
            </a>
        </div>
    </div>
</div>
