<script>
    import { onMount } from 'svelte';
    import { fly, fade } from 'svelte/transition';
    import { Star, Quote, ArrowLeft, ArrowRight } from 'lucide-svelte';

    let mounted = false;
    let visibleElements = {};
    let currentSlide = 0;

    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 testimonials = [
        {
            name: 'Carlos Silva',
            role: 'CEO',
            company: 'TechStore',
            segment: 'E-commerce',
            content:
                'O BassPago revolucionou nossa operação. Aumentamos as vendas em 40% no primeiro mês e a experiência do cliente melhorou muito.',
            rating: 5,
            avatar: 'CS',
            result: '+40% em vendas'
        },
        {
            name: 'Ana Santos',
            role: 'Proprietária',
            company: 'Boutique Fashion',
            segment: 'Varejo',
            content:
                'A integração foi simples e o PIX trouxe muita agilidade para o caixa. Hoje é essencial no nosso dia a dia.',
            rating: 5,
            avatar: 'AS',
            result: '+60% PIX'
        },
        {
            name: 'João Oliveira',
            role: 'CTO',
            company: 'StartupTech',
            segment: 'Tecnologia',
            content:
                'API extremamente bem documentada. Integramos rápido e com segurança. Suporte técnico realmente entende do produto.',
            rating: 5,
            avatar: 'JO',
            result: 'Integração em 2h'
        },
        {
            name: 'Maria Costa',
            role: 'Gerente',
            company: 'Rede de Lojas',
            segment: 'Varejo',
            content:
                'Hoje temos controle total das vendas das lojas em tempo real. Os relatórios mudaram nossa tomada de decisão.',
            rating: 5,
            avatar: 'MC',
            result: '15 lojas integradas'
        },
        {
            name: 'Pedro Almeida',
            role: 'Desenvolvedor',
            company: 'FreelaDev',
            segment: 'Serviços',
            content:
                'Como desenvolvedor, posso afirmar: a API do BassPago é uma das melhores que já usei.',
            rating: 5,
            avatar: 'PA',
            result: '99.9% uptime'
        },
        {
            name: 'Lucia Fernandes',
            role: 'Diretora Financeira',
            company: 'Grupo Empresarial',
            segment: 'Corporativo',
            content:
                'Facilidade de conciliação, transparência e segurança. O ganho operacional foi imediato.',
            rating: 5,
            avatar: 'LF',
            result: 'ROI imediato'
        }
    ];

    const itemsPerSlide = 3;
    const totalSlides = Math.ceil(testimonials.length / itemsPerSlide);

    $: visible = testimonials.slice(
        currentSlide * itemsPerSlide,
        currentSlide * itemsPerSlide + itemsPerSlide
    );

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    }

    function goToSlide(index) {
        currentSlide = index;
    }
</script>



<style>
    /* Card styling */
    .card-basspago {
        background-color: white;
        backdrop-filter: blur(10px);
        border: 1px solid rgb(229 231 235); /* gray-200 */
        border-radius: 1.5rem;
        padding: 2rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .card-basspago::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #3b82f6, #06b6d4);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .card-basspago:hover::before {
        transform: scaleX(1);
    }

    .card-basspago:hover {
        transform: translateY(-8px);
        border-color: rgb(209 213 219); /* gray-300 */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    /* Gradient text */
    .text-gradient {
        background: linear-gradient(135deg, #3b82f6, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Navigation buttons */
    button:hover {
        transform: scale(1.05);
    }

    /* Slide transition */
    .grid {
        min-height: 400px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .grid {
            grid-template-columns: 1fr;
            min-height: auto;
        }
    }

    @media (max-width: 1024px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>