<script>
    import { onMount } from 'svelte';
    import { fly, fade } from 'svelte/transition';
    import { CreditCard, Code, ArrowRight, Check, Zap, Building2 } from 'lucide-svelte';
    import { goto } from '$app/navigation';

    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 products = [
        {
            icon: CreditCard,
            title: 'PDV Completo',
            subtitle: 'Venda presencial',
            description:
                'Receba de forma rápida e segura no seu estabelecimento físico, com Pix integrado ao PDV.',
            highlight: 'Mais vendido',
            color: 'from-blue-500 to-cyan-500',
            link: '/pdv'
        },
         {
            icon: Building2,
            title: 'Banking',
            subtitle: 'Conta Digital',
            description:
                'Acompanhe recebimentos, pague fornecedores e controle tudo em um único ambiente.',
            highlight: 'Sem mensalidade',
            color: 'from-blue-600 to-emerald-400',
            link: '/conta-digital'
        },
        {
            icon: Code,
            title: 'APIs First',
            subtitle: 'Para desenvolvedores',
            description:
                'APIs projetadas para eliminar complexidade e ganhar velocidade na integração',
            highlight: 'Mais integrado',
            color: 'from-green-500 to-emerald-500',
            link: '/pix'
        }
    ];

    // Função para lidar com o clique no botão
    function handleProductClick(product) {
        if (product.link) {
            goto(product.link);
        }
    }
</script>

<section id="produtos" class="section-padding bg-gray-50">
    <div class="container-basspago">
        <!-- Header -->
        <div
            class="text-center mb-20"
            data-animate
            id="products-header"
        >
            {#if mounted && visibleElements['products-header']}
                <h2
                    class="text-4xl md:text-5xl font-black text-gray-900 mb-6"
                    in:fly={{ y: 24, duration: 500, delay: 100 }}
                >
                    Soluções completas para
                    <br />
                    <span class="text-gradient">seu negócio crescer</span>
                </h2>

                <p
                    class="text-xl text-gray-600 max-w-3xl mx-auto"
                    in:fly={{ y: 24, duration: 500, delay: 200 }}
                >
                    Uma conta, múltiplas formas de pagamento. Pix, boleto, links de
                    pagamento e PDV integrados à sua operação
                </p>
            {/if}
        </div>

        <!-- Products Grid - 3 colunas -->
        <div class="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {#each products as product, index}
                <div
                    class="card-basspago flex flex-col"
                    data-animate
                    id="product-{index}"
                >
                    {#if mounted && visibleElements[`product-${index}`]}
                        <div
                            in:fly={{ y: 32, duration: 450, delay: index * 150 }}
                            class="h-full flex flex-col"
                        >
                            <!-- Badge -->
                            <span
                                class="inline-block text-white text-xs font-semibold px-3 py-1 rounded-full bg-gradient-to-r {product.color} mb-6"
                            >
                                {product.highlight}
                            </span>

                            <!-- Icon -->
                            <div
                                class="w-20 h-20 bg-gradient-to-r {product.color} rounded-2xl flex items-center justify-center mb-6"
                            >
                                <svelte:component this={product.icon} size={40} class="text-white" />
                            </div>

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

                            <span class="text-blue-600 font-semibold mb-4 text-lg">
                                {product.subtitle}
                            </span>

                            <p class="text-gray-600 mb-8 leading-relaxed">
                                {product.description}
                            </p>

                            <!-- CTA -->
                            <button
                                class="mt-auto w-full bg-gray-900 text-white py-4 rounded-xl
                                       font-semibold flex items-center justify-center gap-2
                                       hover:bg-gray-800 transition-all duration-300
                                       group {product.link ? 'cursor-pointer' : 'cursor-default opacity-75'}"
                                on:click={() => handleProductClick(product)}
                                disabled={!product.link}
                            >
                                Saiba mais
                                <ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
                            </button>
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
</section>

<style>
    /* Animações personalizadas */
    .card-basspago:hover {
        transform: translateY(-6px);
    }

    /* Transição suave para o ícone da seta */
    .group:hover .group-hover\:translate-x-1 {
        transform: translateX(0.25rem);
    }

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

    /* Estilo para botões desabilitados */
    button:disabled {
        opacity: 0.75;
        cursor: not-allowed;
    }

    button:disabled:hover {
        background-color: #111827; /* Mantém a cor original quando desabilitado */
    }
</style>