Front-End/src/lib/components/Features.svelte

<script>
    import { onMount } from 'svelte';
    import { fly, fade, scale } from 'svelte/transition';
    import {
        Shield,
        Zap,
        BarChart3,
        Users,
        Clock,
        BadgeCheck,
        ShieldCheck,
        DollarSign,
        TrendingUp
    } from 'lucide-svelte';

    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 features = [
        {
            icon: Shield,
            title: 'Segurança bancária',
            description: 'Infraestrutura certificada PCI DSS com criptografia de ponta.'
        },
        {
            icon: Zap,
            title: 'Pagamentos em tempo real',
            description: 'PIX instantâneo e alta taxa de aprovação em cartões.'
        },
        {
            icon: BarChart3,
            title: 'Relatórios e controle',
            description: 'Dashboard completo para conciliação financeira.'
        },
        {
            icon: Users,
            title: 'Gestão de clientes',
            description: 'Ferramentas para fidelização e crescimento de receita.'
        },
        {
            icon: Clock,
            title: 'Suporte especializado',
            description: 'Atendimento humano com SLA empresarial.'
        },
        {
            icon: BadgeCheck,
            title: 'Participante do Pix junto ao Banco Central',
            description: 'Conexão direta com o sistema PIX, sem intermediários.'
        },
        {
            icon: ShieldCheck,
            title: 'Prevenção de fraudes em tempo real',
            description: 'Análise inteligente de transações com bloqueio automático.'
        },
        {
            icon: DollarSign,
            title: 'Baixo setup e mensalidade acessível',
            description: 'Sem exigências de volumetria elevada para começar.'
        }
    ];

    const stats = [
        { number: '50k+', label: 'Empresas ativas', icon: Users },
        { number: 'R\$ 2 bi+', label: 'Processado por mês', icon: TrendingUp },
        { number: '99,9%', label: 'Disponibilidade', icon: Shield },
        { number: '< 1s', label: 'Tempo médio de resposta', icon: Zap }
    ];
</script>

<section id="recursos" class="section-padding bg-white">
    <div class="container-basspago">
        <!-- HEADER -->
        <div
            class="mx-auto mb-20 max-w-3xl text-center"
            data-animate
            id="features-header"
        >
            {#if mounted && visibleElements['features-header']}
                

                <h2
                    class="mb-6 text-4xl md:text-5xl font-black text-gray-900"
                    in:fly={{ y: 30, duration: 600, delay: 100 }}
                >
                    Tecnologia pensada
                    <br />
                    <span class="text-gradient">para escalar seu negócio</span>
                </h2>

                <p
                    class="text-xl text-gray-600 leading-relaxed"
                    in:fly={{ y: 30, duration: 600, delay: 200 }}
                >
                    Uma plataforma completa de pagamentos para empresas que exigem segurança, desempenho e
                    confiabilidade.
                </p>
            {/if}
        </div>

        <!-- FEATURES GRID -->
        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 mb-20">
            {#each features as feature, index}
                <div
                    class="text-center group"
                    data-animate
                    id="feature-{index}"
                >
                    {#if mounted && visibleElements[`feature-${index}`]}
                        <div
                            in:fly={{ y: 30, duration: 500, delay: index * 100 }}
                            class="h-full flex flex-col"
                        >
                            <!-- Icon -->
                            <div
                                class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:shadow-lg transition-all duration-300 hover:scale-110 hover:rotate-3"
                            >
                                <svelte:component this={feature.icon} size={32} class="text-white" />
                            </div>

                            <!-- Content -->
                            <h3 class="text-xl font-bold text-gray-900 mb-4">
                                {feature.title}
                            </h3>

                            <p class="text-gray-600 leading-relaxed">
                                {feature.description}
                            </p>
                        </div>
                    {/if}
                </div>
            {/each}
        </div>

    </div>
</section>

<style>
    /* Animações personalizadas para os ícones */
    .group:hover .w-16 {
        animation: iconBounce 0.6s ease-in-out;
    }

    @keyframes iconBounce {
        0%, 100% {
            transform: scale(1) rotate(0deg);
        }
        25% {
            transform: scale(1.1) rotate(3deg);
        }
        75% {
            transform: scale(1.05) rotate(-1deg);
        }
    }

    /* Gradient text para os números das estatísticas */
    .text-gradient {
        background: linear-gradient(45deg, #06b6d4, #fbbf24);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Hover effect para cards de features */
    .group:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
    }

    /* Animação de pulso para decorações de fundo */
    .bg-white\/5 {
        animation: pulse 4s ease-in-out infinite;
    }

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