<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';
    import Modal from '$lib/components/Modal.svelte';

    let showModal = false;

    function openCreateAccountModal() {
        showModal = true;
    }

    function closeModal() {
        showModal = false;
    }

    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">
        <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>

        <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"
                        >
                            <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>

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

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

                            {#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>

        <div
            class="text-center"
            data-animate
            id="howitworks-cta"
        >
            {#if mounted && visibleElements['howitworks-cta']}
                <div in:fly={{ y: 24, duration: 500 }}>
                    <button
                        on:click={openCreateAccountModal}
                        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>

<Modal 
    bind:isOpen={showModal}
    on:close={closeModal}
>
</Modal>

<style>

.modal-content-custom {
    color: #333;
    line-height: 1.6;
    text-align: center;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #1a1a1a;
}

.modal-description {
    margin: 0 0 20px 0;
    color: #666;
    font-size: 1rem;
}

.modal-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    text-align: left;
}

.modal-features li {
    padding: 8px 0;
    font-size: 0.95rem;
    color: #555;
}

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

.modal-button {
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    width: 100%;
}

.modal-button.primary {
    background: #41FE95;
    color: #000;
}

.modal-button.primary:hover {
    background: #35e085;
    transform: translateY(-1px);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.section-padding {
    padding: 5rem 0;
}

.container-basspago {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

.bg-white {
    background-color: white;
}

.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.font-black {
    font-weight: 900;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.text-gray-900 {
    color: #111827;
}

.text-gray-600 {
    color: #4b5563;
}

.text-blue-600 {
    color: #2563eb;
}

.grid {
    display: grid;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-2 {
    gap: 0.5rem;
}

.relative {
    position: relative;
}

.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.h-14 {
    height: 3.5rem;
}

.w-14 {
    width: 3.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.bg-gray-100 {
    background-color: #f3f4f6;
}

.px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
}
    .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;
    }

    .step-item::after {
        content: '';
        position: absolute;
        top: 1.75rem; 
        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;
    }

    .step-item:last-child::after {
        display: none;
    }

    @media (max-width: 768px) {
        .step-item::after {
            display: none;
        }
    }

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

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

    .step-icon:hover {
        animation: iconPulse 0.6s ease-in-out;
    }

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

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