<script>
    import { onMount } from 'svelte';
    import { fly, fade } from 'svelte/transition';
    import { UserPlus, Settings, Zap, TrendingUp, ArrowRight, CheckCircle } 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 steps = [
        {
            icon: UserPlus,
            title: 'Crie sua conta',
            description: 'Cadastro digital rápido, sem burocracia.'
        },
        {
            icon: Settings,
            title: 'Configure sua operação',
            description: 'Defina pagamentos, integrações e dados do negócio.'
        },
        {
            icon: Zap,
            title: 'Comece a receber',
            description: 'PIX, cartão, boleto e links de pagamento.'
        },
        {
            icon: TrendingUp,
            title: 'Acompanhe e escale',
            description: 'Relatórios e gestão em tempo real.'
        }
    ];
</script>

<section id="como-funciona" class="section-padding bg-white">
    <div class="container-basspago">
        <!-- Header -->
        <div
            class="text-center mb-20 max-w-3xl mx-auto"
            data-animate
            id="howitworks-header"
        >
            {#if mounted && visibleElements['howitworks-header']}
                <span
                    class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 mb-4"
                    in:fly={{ y: 24, duration: 500 }}
                >
                    <CheckCircle size={14} />
                    Como funciona
                </span>

                <h2
                    class="text-4xl md:text-5xl font-black text-gray-900 mb-4"
                    in:fly={{ y: 24, duration: 500, delay: 100 }}
                >
                    Comece a receber em{' '}
                    <span class="text-gradient">poucos passos</span>
                </h2>

                <p
                    class="text-gray-600 text-lg"
                    in:fly={{ y: 24, duration: 500, delay: 200 }}
                >
                    Estrutura simples, rápida e segura para sua empresa operar pagamentos.
                </p>
            {/if}
        </div>

        <!-- Steps -->
        <div class="relative grid md:grid-cols-4 gap-10 mb-20">
            {#each steps as step, index}
                <div
                    class="text-center step-item"
                    data-animate
                    id="step-{index}"
                >
                    {#if mounted && visibleElements[`step-${index}`]}
                        <div
                            in:fly={{ y: 30, duration: 400, delay: index * 80 }}
                            class="relative"
                        >
                            <!-- Step Icon -->
                            <div
                                class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 step-icon group-hover:bg-blue-100 transition-colors duration-300"
                            >
                                <svelte:component this={step.icon} size={22} class="text-blue-600" />
                            </div>

                            <!-- Step Number & Title -->
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">
                                {index + 1}. {step.title}
                            </h3>

                            <!-- Step Description -->
                            <p class="text-sm text-gray-600">
                                {step.description}
                            </p>

                            <!-- Connecting Line (não no último item) -->
                            {#if index < steps.length - 1}
                                <div
                                    class="hidden md:block absolute top-7 left-full w-full h-0.5 bg-gradient-to-r from-blue-200 to-transparent -z-10"
                                    style="width: calc(100% - 1rem);"
                                />
                            {/if}
                        </div>
                    {/if}
                </div>
            {/each}
        </div>

        <!-- CTA -->
        <div
            class="text-center"
            data-animate
            id="howitworks-cta"
        >
            {#if mounted && visibleElements['howitworks-cta']}
                <div in:fly={{ y: 24, duration: 500 }}>
                    <button
                        on:click={() => goto('/precos#form-negociacao-basspago')}
                        class="btn-primary px-14 py-4 text-base inline-flex items-center gap-2 group"
                    >
                        Criar conta grátis
                        <ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
                    </button>

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

<style>
    /* Animações para os passos */
    .step-item {
        position: relative;
    }

    .step-item:hover .step-icon {
        transform: scale(1.1);
        background-color: rgb(219 234 254); /* blue-100 */
    }

    .step-icon {
        transition: all 0.3s ease;
    }

    /* Linha conectora animada */
    .step-item::after {
        content: '';
        position: absolute;
        top: 1.75rem; /* 28px */
        left: calc(100% - 0.5rem);
        width: calc(100% - 2rem);
        height: 2px;
        background: linear-gradient(90deg, rgb(191 219 254), transparent);
        opacity: 0;
        animation: lineGrow 0.8s ease-in-out forwards;
        animation-delay: 0.5s;
    }

    /* Não mostrar linha no último item */
    .step-item:last-child::after {
        display: none;
    }

    /* Esconder linha em mobile */
    @media (max-width: 768px) {
        .step-item::after {
            display: none;
        }
    }

    @keyframes lineGrow {
        from {
            opacity: 0;
            transform: scaleX(0);
        }
        to {
            opacity: 1;
            transform: scaleX(1);
        }
    }

    /* Hover effect para o botão CTA */
    .group:hover .group-hover\:translate-x-1 {
        transform: translateX(0.25rem);
    }

    /* Animação de pulso para os ícones */
    .step-icon:hover {
        animation: iconPulse 0.6s ease-in-out;
    }

    @keyframes iconPulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
    }

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