<script>
    import { onMount } from 'svelte';
    import { fly } from 'svelte/transition';
    import {
        ArrowRight,
        Zap,
        Shield,
        Clock,
        Star,
        CheckCircle
    } from 'lucide-svelte';
     import { goto } from '$app/navigation';
    
    import checkIcon from '$lib/assets/check.svg';
    import noneIcon from '$lib/assets/none.svg';

    let mounted = false;
    let visibleElements = {};

    onMount(() => {
        mounted = true;

        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        visibleElements[entry.target.id] = true;
                    }
                });
            },
            { threshold: 0.1 }
        );

        const elements = document.querySelectorAll('[data-animate]');
        elements.forEach((el) => observer.observe(el));

        return () => observer.disconnect();
    });

    const basspagoFeatures = [
        'Suporte ágil e direto, sem depender de múltiplos intermediários',
        'Integração rápida e simples via APIs prontas para uso',
        'Controle centralizado com ferramentas intuitivas',
        'Operação completa no mundo físico e digital com app de conta e PDV integrados',
        'Crescimento flexível, sem exigência de volumetrias elevadas',
        'Atualização constante com as últimas evoluções do Pix e do mercado'
    ];

    const competitorFeatures = [
        'SLA via tickets demorados e suporte fragmentado deixa a operação parada',
        'Integrações complexas e demoradas exigem equipes especializadas',
        'Processos internos frágeis, sem visibilidade e difíceis de operar',
        'Sem suporte ao ponto de venda físico, soluções fragmentadas',
        'Barreiras altas com requisitos de volume e custos iniciais',
        'Atualizações lentas, deixando a operação defasada'
    ];

    // Dados para seção CTA
    const benefits = [
        { icon: Zap, title: 'Setup rápido', description: 'Ative em poucos minutos' },
        { icon: Shield, title: 'Segurança bancária', description: 'Padrões PCI DSS' },
        { icon: Clock, title: 'Suporte contínuo', description: 'Especialistas disponíveis' },
        { icon: Star, title: 'Sem fidelidade', description: 'Cancele quando quiser' }
    ];

    const guarantees = [
        'Sem taxa de setup',
        'Sem taxa de cancelamento',
        'Sem fidelidade',
        'Suporte incluso',
        'Migração assistida',
        'Treinamento completo'
    ];
</script>

<section class="compare-section">
    <div class="compare-container">
        <div 
            class="compare-text fade-up"
            data-animate
            id="compare-text"
        >
            {#if mounted && visibleElements['compare-text']}
                <h2 
                    in:fly={{ y: 20, duration: 500 }}
                >
                    Por que escolher a Bass Pago?
                </h2>
                <p 
                    in:fly={{ y: 20, duration: 500, delay: 100 }}
                >
                    Analise os diferenciais da Bass Pago frente a outras soluções de pagamento. 
                    Dados e performance falam mais alto que promessas.
                </p>
            {/if}
        </div>

        <div class="compare-table">
            <div 
                class="compare-columns"
                data-animate
                id="compare-table"
            >
                {#if mounted && visibleElements['compare-table']}
                    <div 
                        class="compare-column fade-up"
                        in:fly={{ y: 30, duration: 600, delay: 200 }}
                    >
                        <div class="compare-header">
                            <span><b>Bass Pago</b></span>
                        </div>
                        {#each basspagoFeatures as feature, index}
                            <div 
                                class="item"
                                in:fly={{ x: -20, duration: 400, delay: 300 + index * 100 }}
                            >
                                <img src={checkIcon} alt="Check" />
                                {feature}
                            </div>
                        {/each}
                    </div>

                    <div 
                        class="compare-column fade-up"
                        in:fly={{ y: 30, duration: 600, delay: 250 }}
                    >
                        <div class="compare-header">
                            <span>Outros provedores</span>
                        </div>
                        {#each competitorFeatures as feature, index}
                            <div 
                                class="item"
                                in:fly={{ x: 20, duration: 400, delay: 300 + index * 100 }}
                            >
                                <img src={noneIcon} alt="None" />
                                {feature}
                            </div>
                        {/each}
                    </div>
                {/if}
            </div>
        </div>
    </div>
</section>

<section class="relative overflow-hidden bg-black py-32">
    <div class="container-basspago relative z-10 text-center text-white">
        <div
            data-animate
            id="cta-title"
        >
            {#if mounted && visibleElements['cta-title']}
                <h2
                    class="mx-auto max-w-4xl
                           text-3xl md:text-4xl lg:text-5xl
                           font-semibold
                           leading-tight
                           mb-6"
                    in:fly={{ y: 20, duration: 500 }}
                >
                    Pronto para simplificar
                    <br />
                    <span class="text-gradient">seus pagamentos?</span>
                </h2>
            {/if}
        </div>

        <div
            data-animate
            id="cta-subtitle"
        >
            {#if mounted && visibleElements['cta-subtitle']}
                <p
                    class="mx-auto max-w-3xl
                           text-base md:text-lg
                           text-white/75
                           mb-16"
                    in:fly={{ y: 20, duration: 500, delay: 100 }}
                >
                    Solução completa para pagamentos online, incluindo gateway, antifraude e gestão de risco.
                </p>
            {/if}
        </div>

        <!-- Benefits -->
        <div
            class="mx-auto mb-20
                   grid max-w-4xl
                   grid-cols-2 md:grid-cols-4
                   gap-10"
            data-animate
            id="cta-benefits"
        >
            {#if mounted && visibleElements['cta-benefits']}
                {#each benefits as benefit, index}
                    <div
                        class="text-center"
                        in:fly={{ y: 20, duration: 500, delay: 200 + index * 50 }}
                    >
                        <div
                            class="mx-auto mb-3
                                   flex h-12 w-12
                                   items-center justify-center
                                   rounded-xl
                                   bg-white/10"
                        >
                            <svelte:component this={benefit.icon} size={22} class="text-white" />
                        </div>
                        <h4 class="text-sm font-medium">{benefit.title}</h4>
                        <p class="text-xs text-white/60">{benefit.description}</p>
                    </div>
                {/each}
            {/if}
        </div>

        <div
            class="mb-20
                   flex flex-col sm:flex-row
                   items-center justify-center
                   gap-5"
            data-animate
            id="cta-buttons"
        >
            {#if mounted && visibleElements['cta-buttons']}
                <div
                    class="flex flex-col sm:flex-row gap-5"
                    in:fly={{ y: 20, duration: 500, delay: 300 }}
                >
                    <button class="btn-primary group" on:click={() => goto('/precos#form-negociacao-basspago')}>
                        Criar conta grátis
                        <ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
                    </button>

                </div>
            {/if}
        </div>

    </div>
</section>

<style>

.compare-section {
    background-color: #000;
    color: white;
    padding: 60px 20px;
    position: relative;
}

.compare-container {
    max-width: 1280px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

.compare-text {
    padding-right: 79px;
}

.compare-text h2 {
    font-weight: 600;
    font-size: clamp(2.4rem, 2.6vw, 2.6rem);
    margin-bottom: 30px;
}

.compare-text p {
    color: #ccc;
    line-height: 1.6;
}

.compare-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.compare-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.compare-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compare-header {
    font-weight: 400;
    color: #aaa;
    margin-bottom: 8px;
    text-align: center;
}

.compare-header b {
    color: #fff;
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f1f1f;
    padding: 12px 16px;
    border-radius: 8px;
    color: white;
    font-weight: 400;
    min-height: 66px;
}

.item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


@media (max-width: 1024px) {
    .compare-container {
        grid-template-columns: 1fr;
    }

    .compare-text {
        padding-right: 0;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .compare-columns {
        grid-template-columns: 1fr;
    }
}


    /* Gradient text animation */
    .text-gradient {
        background: linear-gradient(
            90deg,
            var(--color-brand-blue),
            var(--color-brand-emerald),
            var(--color-brand-blue)
        );
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradientMove 4s ease-in-out infinite;
    }

    @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    /* Button hover effects */
    .btn-primary {
        position: relative;
        overflow: hidden;
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, var(--color-brand-blue), var(--color-brand-emerald));
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    .btn-primary:hover::before {
        opacity: 0.1;
    }

    /* Benefits icon hover animation */
    .h-12:hover {
        transform: scale(1.1) rotate(5deg);
        transition: transform 0.3s ease;
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* Arrow hover effect */
    .group:hover .group-hover\:translate-x-1 {
        transform: translateX(0.25rem);
    }

    /* Secondary button hover effect */
    button:hover {
        transform: translateY(-2px);
    }

    /* Guarantee items hover effect */
    .gap-2:hover {
        color: rgba(255, 255, 255, 0.9);
        transition: color 0.3s ease;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .grid-cols-2 {
            grid-template-columns: 1fr;
        }
        
        .gap-10 {
            gap: 2rem;
        }
    }

    /* Pulse animation for the badge star */
    .text-\[var\(--color-brand-emerald\)\] {
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }
</style>