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

    import backgroundSection1 from '$lib/assets/backgroundSection2.png';
    
    import logoCambionet from '$lib/assets/marca-cambionet.png';
    import logoCazco from '$lib/assets/marca-cazco.png';
    import logoCdl from '$lib/assets/marca-cdl.png';
    import logoFecomercio from '$lib/assets/marca-fecomercio-rs.png';
    import logoGramado from '$lib/assets/marca-gramado-sumit.png';
    import logoHubsafe from '$lib/assets/marca-hubsafe.png';
    import logoIcGloball from '$lib/assets/marca-ic-globall.png';
    import logoIcSindi from '$lib/assets/marca-ic-sindi.png';
    import logoJusfy from '$lib/assets/marca-jusfy.png';
    import logoSesc from '$lib/assets/marca-sesc.png';

    let mounted = false;
    let heroSection;
    let currentWordIndex = 0;
    let isTransitioning = false;
    
    const words = ['Escalar', 'Evoluir', 'Empresas'];

    const logos = [
        { src: logoCambionet, alt: 'Cambionet' },
        { src: logoCazco, alt: 'Cazco' },
        { src: logoCdl, alt: 'CDL' },
        { src: logoFecomercio, alt: 'Fecomércio RS' },
        { src: logoGramado, alt: 'Gramado Summit' },
        { src: logoHubsafe, alt: 'Hubsafe' },
        { src: logoIcGloball, alt: 'IC Globall' },
        { src: logoIcSindi, alt: 'IC Sindi' },
        { src: logoJusfy, alt: 'Jusfy' },
        { src: logoSesc, alt: 'SESC' }
    ];

    onMount(() => {
        mounted = true;
        
        const wordInterval = setInterval(() => {
            isTransitioning = true;
            
            setTimeout(() => {
                currentWordIndex = (currentWordIndex + 1) % words.length;
                isTransitioning = false;
            }, 300);
        }, 3000);

        return () => {
            clearInterval(wordInterval);
        };
    });
</script>

<section
    bind:this={heroSection}
    class="relative min-h-screen overflow-hidden bg-black flex flex-col items-center justify-center"
>
    <img
        src={backgroundSection1}
        alt="Pessoa utilizando Pix no celular"
        class="absolute inset-0 h-full w-full object-cover
               object-[75%_center]
               sm:object-[70%_center]
               md:object-[65%_center]
               lg:object-[60%_center]"
    />

    <div class="absolute inset-0 bg-black/50" />

    {#if mounted}
        <div
            class="absolute top-16 left-6 sm:top-24 sm:left-10 w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-gradient-to-r from-blue-500/20 to-emerald-400/20 blur-xl floating-animation"
            in:fade={{ duration: 1000, delay: 400 }}
        />

        <div
            class="absolute bottom-20 right-8 sm:bottom-32 sm:right-16 w-24 h-24 sm:w-36 sm:h-36 rounded-full bg-gradient-to-r from-emerald-400/20 to-blue-500/20 blur-xl floating-animation"
            style="animation-delay: 2s"
            in:fade={{ duration: 1000, delay: 600 }}
        />
    {/if}

    <!-- Conteúdo Principal -->
    <div
        class="relative z-10 container-basspago pt-20 sm:pt-32 md:pt-40 text-center max-w-5xl mx-auto px-4 sm:px-6 flex-1 flex flex-col justify-center"
    >
        {#if mounted}
            <h1
                class="text-white
                       text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl
                       font-black
                       leading-tight
                       mb-6 sm:mb-8"
                in:fly={{ y: 30, duration: 800 }}
            >
                Infraestrutura de pagamento
                <br />
                flexível para{' '}
                <span class="word-transition">
                    {#if !isTransitioning}
                        <span 
                            class="text-gradient" 
                            style="background-size: 300% 300%;"
                            in:fly={{ y: 30, duration: 400, delay: 100 }}
                            out:fly={{ y: -30, duration: 300 }}
                        >
                            {words[currentWordIndex]}
                        </span>
                    {/if}
                </span>
            </h1>
        {/if}

        <!-- Subtitle -->
        {#if mounted}
            <p
                class="mx-auto max-w-3xl
                       text-base sm:text-lg md:text-xl
                       text-white/90
                       mb-16 sm:mb-20
                       leading-relaxed"
                in:fly={{ y: 20, duration: 800, delay: 150 }}
            >
                A melhor solução de pagamentos instantâneos, unindo confiança, segurança e
                escalabilidade para crescer sem limites.
            </p>
        {/if}

               {#if mounted}
            <div
                class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center"
                in:fly={{ y: 20, duration: 800, delay: 250 }}
            >
                <!-- Primary Button -->
                <button
    on:click={() => goto('/precos#form-negociacao-basspago')}
    class="relative group
           inline-flex items-center justify-center gap-3
           rounded-2xl
           px-8 py-3 sm:px-12 sm:py-4
           bg-white text-black
           text-sm sm:text-base
           font-semibold
           overflow-hidden
           transition-all duration-300
           hover:shadow-2xl hover:scale-105
           w-full sm:w-auto"
>
    <span
        class="absolute inset-0
               bg-gradient-to-r from-blue-600 to-emerald-400
               -translate-x-full
               group-hover:translate-x-0
               transition-transform duration-500 ease-out"
    />
    <span class="relative z-10 flex items-center gap-3 group-hover:text-white">
        Abrir conta
        <ArrowRight size={18} />
    </span>
</button>
            </div>
        {/if}
    </div>

    {#if mounted}
        <div
            class="hero-logos-section relative z-10 w-full pb-12 sm:pb-16"
            in:fly={{ y: 20, duration: 800, delay: 250 }}
        >
            <div class="hero-logos-wrapper">
                <div class="hero-logos-track">
                    <!-- Primeira sequência de logos -->
                    {#each logos as logo}
                        <img src={logo.src} alt={logo.alt} />
                    {/each}
                    
                    <!-- Duplicação para loop infinito -->
                    {#each logos as logo}
                        <img src={logo.src} alt={logo.alt} />
                    {/each}
                </div>
            </div>
        </div>
    {/if}
</section>

<style>
    /* Gradient animation personalizada */
    .text-gradient {
        background: linear-gradient(45deg, #3b82f6, #10b981, #3b82f6);
        background-size: 300% 300%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientMove 6s ease infinite;
    }

    @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    /* Container para as transições de palavras */
    .word-transition {
        display: inline-block;
        position: relative;
        min-width: 200px;
        min-height: 1.2em;
        text-align: left;
    }

    /* Seção dos logos - posicionada na parte inferior */
    .hero-logos-section {
        margin-top: auto;
    }

    /* Logos Parceiros - Wrapper */
    .hero-logos-wrapper {
        width: 100vw;
        overflow: hidden;
        margin: 0 auto;
        padding: 20px 0;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    /* Logos Parceiros - Track */
    .hero-logos-track {
        display: flex;
        width: max-content;
        gap: 40px;
        align-items: center;
        opacity: 0.6;
        animation: scroll 20s linear infinite;
    }

    .hero-logos-track img {
        height: 30px;
        flex-shrink: 0;
        filter: brightness(0) invert(1);
        transition: opacity 0.3s ease;
    }

    .hero-logos-track img:hover {
        opacity: 1;
    }

    /* Animação de scroll infinito */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

    /* Floating animation já está definida no CSS global */
    .floating-animation {
        animation: floating 6s ease-in-out infinite;
    }

    /* Responsividade para logos */
    @media (max-width: 768px) {
        .hero-logos-track {
            gap: 30px;
        }

        .hero-logos-track img {
            height: 24px;
        }

        .hero-logos-wrapper {
            padding: 15px 0;
        }
    }

    @media (max-width: 480px) {
        .hero-logos-track {
            gap: 25px;
        }

        .hero-logos-track img {
            height: 20px;
        }

        .hero-logos-wrapper {
            padding: 12px 0;
        }
    }
</style>