---
import Button from '@components/base/Button.astro';

interface CTAProps {
    icon?: 'chat' | 'consult' | 'help' | 'phone';
    title: string;
    description: string;
    btnText?: string;
    btnHref?: string;
    modalTarget?: string;
    variant?: 'default' | 'consultation';
}

const {
    icon = 'chat',
    title,
    description,
    btnText,
    btnHref = "#contact",
    modalTarget,
    variant = 'default'
} = Astro.props as CTAProps;

const iconPaths: Record<string, string> = {
    chat: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
    consult: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>',
    help: '<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
    phone: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>'
};
---

<section class="cta-section">
    <div class="cta-section__overlay"></div>
    <div class="site-container">
        <div class="cta-section__inner animate-on-scroll" data-animation="fade-up">
            <div class="cta-section__icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={iconPaths[icon] || iconPaths.chat}></svg>
            </div>
            <h3 class="cta-section__title">{title}</h3>
            <p class="cta-section__desc">{description}</p>
            {btnText && (
                <Button variant="gold" size="lg" href={btnHref} data-modal-target={modalTarget} class="cta-section__btn">
                    {btnText}
                </Button>
            )}
        </div>
    </div>
</section>

<style>
    .cta-section {
        padding: 0;
        position: relative;
        overflow: visible;
        margin-bottom: 3rem;
    }

    .site-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .cta-section__inner {
        padding: 3.5rem 2.5rem;
        background: linear-gradient(135deg, #0a2540 0%, #1e3050 100%);
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .cta-section__overlay {
        position: absolute;
        top: -50%;
        right: -20%;
        width: 60%;
        height: 150%;
        background: radial-gradient(circle, rgba(234, 194, 110, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .cta-section__icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 1.5rem;
        background: rgba(234, 194, 110, 0.15);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eac26e;
    }

    .cta-section__icon svg {
        width: 32px;
        height: 32px;
    }

    .cta-section__title {
        font-size: clamp(1.5rem, 3vw, 1.75rem);
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 0.75rem 0;
        position: relative;
        z-index: 1;
    }

    .cta-section__desc {
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.75);
        margin: 0 0 2rem 0;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 1;
        line-height: 1.6;
    }

    .cta-section__btn {
        position: relative;
        z-index: 1;
    }

    /* Анимации */
    .animate-on-scroll {
        opacity: 0;
        will-change: opacity, transform;
    }

    [data-animation="fade-up"] {
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    @media (max-width: 768px) {
        .cta-section {
            margin-bottom: 2rem;
        }

        .cta-section__inner {
            padding: 2.5rem 1.5rem;
        }

        .cta-section__title {
            font-size: 1.5rem;
        }

        .cta-section__desc {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 480px) {
        .cta-section {
            margin-bottom: 1.5rem;
        }

        .cta-section__inner {
            padding: 2rem 1.25rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .animate-on-scroll {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
</style>

<script>
    const setupAnimations = () => {
        const observerOptions = {
            root: null,
            rootMargin: '0px 0px -50px 0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const el = entry.target as HTMLElement;
                    const delay = parseInt(el.dataset.delay || '0');

                    setTimeout(() => {
                        el.classList.add('is-visible');
                    }, delay);

                    observer.unobserve(el);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.animate-on-scroll').forEach((el) => {
            observer.observe(el);
        });
    };

    setupAnimations();
    document.addEventListener('astro:after-swap', setupAnimations);
</script>
