<script>
    import { onMount } from 'svelte';
    import { fly } from 'svelte/transition';
    import { ArrowRight, CreditCard, Smartphone, BarChart3 } 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 solutions = [
        {
            icon: CreditCard,
            title: 'Conta PJ Digital',
            description:
                'Conta completa para empresas com PIX, cartões e gestão financeira integrada.',
            highlight: 'Sem mensalidade',
            cta: 'Abrir conta PJ',
            bg: 'bg-blue-600',
            textColor: 'text-white'
        },
        {
            icon: Smartphone,
            title: 'PDV Inteligente',
            description: 'Venda no presencial com estabilidade, rapidez e integração total.',
            highlight: 'Ideal para lojas físicas',
            cta: 'Conhecer PDV',
            bg: 'bg-white',
            textColor: 'text-gray-900',
            bordered: true
        },
        {
            icon: BarChart3,
            title: 'API & PIX Empresas',
            description: 'Infraestrutura robusta para integrar pagamentos ao seu sistema.',
            highlight: 'Alta performance',
            cta: 'Falar com especialista',
            bg: 'bg-emerald-600',
            textColor: 'text-white'
        }
    ];
</script>

<section id="precos" class="section-padding bg-gray-50">
    <div class="container-basspago">
        <!-- Header -->
        <div
            class="text-center max-w-3xl mx-auto mb-20"
            data-animate
            id="pricing-header"
        >
            {#if mounted && visibleElements['pricing-header']}
                <h2
                    class="text-4xl md:text-5xl font-black text-gray-900 mb-4"
                    in:fly={{ y: 20, duration: 400 }}
                >
                    Soluções para cada tipo de negócio
                </h2>
                <p
                    class="text-lg text-gray-600"
                    in:fly={{ y: 20, duration: 400, delay: 100 }}
                >
                    Escolha a estrutura ideal para operar seus pagamentos com eficiência.
                </p>
            {/if}
        </div>

        <!-- Solutions -->
        <div class="grid md:grid-cols-3 gap-10">
            {#each solutions as solution, index}
                <div
                    class="solution-card rounded-3xl p-10 text-center {solution.bg} {solution.textColor} {solution.bordered
                        ? 'border border-gray-200'
                        : ''}"
                    data-animate
                    id="solution-{index}"
                >
                    {#if mounted && visibleElements[`solution-${index}`]}
                        <div
                            in:fly={{ y: 30, duration: 400, delay: index * 100 }}
                            class="h-full flex flex-col"
                        >
                            <!-- Icon -->
                            <div
                                class="mx-auto mb-6 flex h-14 w-14 items-center justify-center rounded-full {solution.bordered
                                    ? 'bg-gray-100'
                                    : 'bg-white/20'}"
                            >
                                <svelte:component
                                    this={solution.icon}
                                    size={24}
                                    class={solution.bordered ? 'text-gray-700' : 'text-white'}
                                />
                            </div>

                            <!-- Title -->
                            <h3 class="text-2xl font-bold mb-3">{solution.title}</h3>

                            <!-- Description -->
                            <p
                                class="mb-6 {solution.bordered ? 'text-gray-600' : 'text-white/80'}"
                            >
                                {solution.description}
                            </p>

                            <!-- Highlight -->
                            <span
                                class="inline-block mb-6 text-sm font-semibold {solution.bordered
                                    ? 'text-blue-600'
                                    : 'text-white'}"
                            >
                                {solution.highlight}
                            </span>

                            <!-- CTA Button -->
                            <button
                            on:click={() => goto('/precos#form-negociacao-basspago')}
                                class="inline-flex items-center gap-2 px-8 py-3 rounded-full font-semibold transition-all duration-300 group {solution.bordered
                                    ? 'bg-gray-900 text-white hover:bg-gray-800'
                                    : 'bg-white text-black hover:bg-gray-100'} mt-auto"
                            >
                                {solution.cta}
                                <ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
                            </button>
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
</section>

<style>
    /* Solution card hover effects */
    .solution-card {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .solution-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    /* Special hover effect for bordered card */
    .solution-card.bg-white:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border-color: rgb(209 213 219); /* gray-300 */
    }

    /* Icon hover animation */
    .solution-card:hover .h-14 {
        transform: scale(1.1) rotate(5deg);
        transition: transform 0.3s ease;
    }

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

    /* Gradient overlay for colored cards */
    .solution-card:not(.bg-white)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .solution-card:not(.bg-white):hover::before {
        opacity: 1;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .solution-card {
            padding: 2rem;
        }
    }

    /* Animation for the icon container */
    .h-14 {
        transition: all 0.3s ease;
    }

    /* Pulse effect on hover */
    .solution-card:hover {
        animation: cardPulse 0.6s ease-in-out;
    }

    @keyframes cardPulse {
        0%, 100% {
            transform: translateY(-8px) scale(1);
        }
        50% {
            transform: translateY(-10px) scale(1.02);
        }
    }
</style>