<script>
    import { onMount } from 'svelte';
    import { fly } from 'svelte/transition';

    import bassLogo from '$lib/assets/logo-basspago.svg';
    import appleStore from '$lib/assets/apple-store.svg';
    import googlePlay from '$lib/assets/google-play.svg';
    import facebook from '$lib/assets/facebook.svg';
    import instagram from '$lib/assets/instagram.svg';
    import tiktok from '$lib/assets/tiktok.svg';
    import linkedin from '$lib/assets/linkedin.svg';
    import youtube from '$lib/assets/youtube.svg';
    import pciDss from '$lib/assets/ic-pci-dss.svg';

    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();
    });
</script>

<footer class="footer desktop">
    <div class="footer-wrapper">
        <div 
            class="footer-col left"
            data-animate
            id="footer-col-1"
        >
            {#if mounted && visibleElements['footer-col-1']}
                <img 
                    src={bassLogo} 
                    alt="Bass Pago" 
                    class="footer-logo"
                    in:fly={{ y: 30, duration: 500 }}
                />
                <p 
                    class="footer-desc"
                    in:fly={{ y: 30, duration: 500, delay: 100 }}
                >
                    A Infraestrutura financeira<br /> que impulsiona o seu negócio.
                </p>
                <div 
                    class="app-buttons"
                    in:fly={{ y: 30, duration: 500, delay: 200 }}
                >
                    <a href="https://apps.apple.com/br/app/bass-pago/id6499055719">
                        <img src={appleStore} alt="App Store" />
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=com.basspago.app">
                        <img src={googlePlay} alt="Google Play" />
                    </a>
                </div>
            {/if}
        </div>

        <div 
            class="footer-col center"
            data-animate
            id="footer-col-2"
        >
            {#if mounted && visibleElements['footer-col-2']}
                <div 
                    class="footer-menus"
                    in:fly={{ y: 30, duration: 500, delay: 100 }}
                >
                    <div class="menu">
                        <h4>Explore</h4>
                        <a href="/">Home</a>
                        <a href="/conta-digital">Conta Digital</a>
                        <a href="/solucoes-banking">Soluções Banking</a>
                        <a href="/pix">Pix</a>
                        <a href="/adquirencia">Adquiriência</a>
                        <a href="/emissao-de-cartoes">Emissão de Cartões</a>
                    </div>
                    <div class="menu">
                        <h4>Bass</h4>
                        <a href="/sobre">Sobre</a>
                        <a href="/politicas-e-termos">Política e Termos</a>
                        <a href="/precos">Preços</a>
                        <a href="/desenvolvedores">Desenvolva com Bass</a>
                    </div>
                    <div class="menu">
                        <h4>Atendimento</h4>
                        <a href="/centro-suporte">Centro de Suporte</a>
                        <br />
                        <h4>Ouvidoria</h4>
                        <a href="mailto:ouvidoria@basspago.com.br">ouvidoria@basspago.com.br</a>
                    </div>
                </div>
            {/if}
        </div>

        <div 
            class="footer-col right"
            data-animate
            id="footer-col-3"
        >
            {#if mounted && visibleElements['footer-col-3']}
                <p 
                    class="social-label"
                    in:fly={{ y: 30, duration: 500, delay: 150 }}
                >
                    Siga-nos
                </p>
                <div 
                    class="footer-socials"
                    in:fly={{ y: 30, duration: 500, delay: 200 }}
                >
                    <a href="https://www.facebook.com/profile.php?id=61569768364698&mibextid=ZbWKwL">
                        <img src={facebook} alt="Facebook" />
                    </a>
                    <a href="https://www.instagram.com/basspago/">
                        <img src={instagram} alt="Instagram" />
                    </a>
                    <a href="https://www.tiktok.com/@basspago">
                        <img src={tiktok} alt="Tiktok" />
                    </a>
                    <a href="https://www.linkedin.com/company/bass-pago/">
                        <img src={linkedin} alt="Linkedin" />
                    </a>
                    <a href="https://www.youtube.com/@basspago">
                        <img src={youtube} alt="Youtube" />
                    </a>
                </div>
                <div 
                    class="footer-cert"
                    in:fly={{ y: 30, duration: 500, delay: 250 }}
                >
                    <img src={pciDss} alt="PCI-DSS" />
                    <p>Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.</p>
                </div>
            {/if}
        </div>
    </div>

    <div class="footer-cnpj">
        <p>
            © 2025 Bass Pago Instituição de Pagamento é uma empresa de tecnologia e instituição de pagamento autorizada
            pelo Banco Central do Brasil como participante indireta do Pix, sob o ISPB 37293930, inscrita sob o cnpj n*
            37.293.930/0001-90.
        </p>
    </div>
</footer>

<footer class="footer mobile">
    <div class="footer-wrapper">
        <div 
            class="footer-col left"
            data-animate
            id="footer-mobile-col"
        >
            {#if mounted && visibleElements['footer-mobile-col']}
                <img 
                    src={bassLogo} 
                    alt="Bass Pago" 
                    class="footer-logo"
                    in:fly={{ y: 30, duration: 500 }}
                />
                <p 
                    class="footer-desc"
                    in:fly={{ y: 30, duration: 500, delay: 50 }}
                >
                    A Infraestrutura financeira<br /> que impulsiona o seu negócio.
                </p>
                <div 
                    class="app-buttons"
                    in:fly={{ y: 30, duration: 500, delay: 100 }}
                >
                    <a href="https://apps.apple.com/br/app/bass-pago/id6499055719">
                        <img src={appleStore} alt="App Store" />
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=com.basspago.app">
                        <img src={googlePlay} alt="Google Play" />
                    </a>
                </div>
                <div 
                    class="social"
                    in:fly={{ y: 30, duration: 500, delay: 150 }}
                >
                    <p class="social-label">Siga-nos</p>
                    <div class="footer-socials">
                        <a href="https://www.facebook.com/profile.php?id=61569768364698&mibextid=ZbWKwL">
                            <img src={facebook} alt="Facebook" />
                        </a>
                        <a href="https://www.instagram.com/basspago/">
                            <img src={instagram} alt="Instagram" />
                        </a>
                        <a href="https://www.tiktok.com/@basspago">
                            <img src={tiktok} alt="Tiktok" />
                        </a>
                        <a href="https://www.linkedin.com/company/bass-pago/">
                            <img src={linkedin} alt="Linkedin" />
                        </a>
                        <a href="https://www.youtube.com/@basspago">
                            <img src={youtube} alt="Youtube" />
                        </a>
                    </div>
                </div>

                <div 
                    class="footer-col center"
                    in:fly={{ y: 30, duration: 500, delay: 200 }}
                >
                    <div class="footer-menus">
                        <div class="menu">
                            <h4>Explore</h4>
                            <a href="/">Home</a>
                            <a href="/conta-digital">Conta Digital</a>
                            <a href="/solucoes-banking">Soluções Banking</a>
                            <a href="/pix">Pix</a>
                            <a href="/adquirencia">Adquiriência</a>
                            <a href="/emissao-de-cartoes">Emissão de Cartões</a>
                        </div>
                        <div class="menu">
                            <h4>Bass</h4>
                            <a href="/sobre">Sobre</a>
                            <a href="/politicas-e-termos">Política e Termos</a>
                            <a href="/precos">Preços</a>
                            <a href="/desenvolvedores">Desenvolva com Bass</a>
                        </div>
                        <div class="menu">
                            <h4>Atendimento</h4>
                            <a href="/centro-suporte">Centro de Suporte</a>
                            <br />
                            <h4>Ouvidoria</h4>
                            <a href="mailto:ouvidoria@basspago.com.br">ouvidoria@basspago.com.br</a>
                        </div>
                    </div>

                    <div class="footer-cert">
                        <img src={pciDss} alt="PCI-DSS" />
                        <p>Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.</p>
                    </div>
                </div>
            {/if}
        </div>
    </div>

    <div class="footer-cnpj">
        <p>
            © 2025 Bass Pago Instituição de Pagamento é uma empresa de tecnologia e instituição de pagamento autorizada
            pelo Banco Central do Brasil como participante indireta do Pix, sob o ISPB 37293930, sob o cnpj n:
            37.293.930/0001-90.
        </p>
    </div>
</footer>

<style>
    .cta-section {
        background-color: #000;
        padding: 60px 20px;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    .cta-box {
        background: linear-gradient(135deg, #207ce5, #2ee7a6);
        border-radius: 40px;
        text-align: center;
        padding: 60px 40px;
        color: white;
        max-width: 717px;
        width: 100%;
        fill: linear-gradient(234deg, #41FE95 -9.25%, #00F 138.52%);
    }

    .cta-box h2 {
        font-weight: 500;
        margin-bottom: 20px;
    }

    .cta-box p {
        color: #e6e6e6;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    /* Footer */
    .footer {
        max-width: 1280px;
        margin: 0 auto;
        color: white;
        padding: 60px 40px;
    }

    .footer-wrapper {
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 2fr 200px;
        gap: 60px;
    }

    .footer-col.left {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-logo {
        width: 120px;
    }

    .footer-desc {
        color: #ffffff75;
        font-size: 14px;
    }

    .app-buttons {
        display: flex;
        gap: 10px;
    }

    .app-buttons img {
        height: 36px;
    }

    .footer-cnpj {
        color: #888;
        margin: 20px auto;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        padding: 10px 0;
    }

    .footer-cnpj p {
        font-size: 12px;
        text-align: center;
        color: #888;
        margin: 0 auto;
        max-width: 710px;
        width: 100%;
    }

    .mobile .footer-cnpj p {
        width: 100%;
        text-align: left;
    }

    /* Coluna 2 - centro */
    .footer-col.center {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .footer-menus {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

       .menu h4 {
        font-size: 14px;
        color: #444;
        margin-bottom: 10px;
        font-weight: 100;
    }

    .menu a {
        display: block;
        color: rgb(255 255 255 / 50%);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .menu a:hover {
        opacity: 0.8;
    }

    .footer-cert {
        display: flex;
        align-items: baseline;
        gap: 32px;
        margin-top: 30px;
        justify-content: center;
        color: #888;
        font-size: 13px;
        flex-direction: column;
    }

    .footer-cert p {
        font-size: 13px;
    }

    .footer-cert img {
        height: 36px;
    }

    /* Coluna 3 - direita */
    .footer-col.right {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .footer-col.right h4 {
        font-size: 14px;
        color: #aaa;
        margin-bottom: 4px;
    }

    .social-label {
        font-size: 14px;
        color: #aaa;
        margin-top: 10px;
    }

    .footer-socials {
        display: flex;
        gap: 10px;
        text-align: right;
    }

    .footer-socials img {
        width: 20px;
        height: 20px;
        opacity: 0.8;
    }

    .footer-socials img:hover {
        opacity: 1;
    }

    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }

    /* Link CTA */
    .link-cta {
        position: relative;
        display: inline-block;
        overflow: hidden;
        background-color: #fff;
        color: #111;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        font-size: 15px;
        transition: color 0.3s ease, background-color 0.3s ease;
        z-index: 1;
    }

    .link-cta::before {
        content: "";
        position: absolute;
        right: -131px;
        top: -64px;
        width: 433px;
        height: 166px;
        border-radius: 150px;
        background: linear-gradient(261deg, #41FE95 6.53%, #00F 123.97%);
        transform: translateX(-100%);
        transition: transform 0.9s ease;
        z-index: 0;
    }

    .link-cta:hover::before {
        transform: translateX(0%);
    }

    .link-cta:hover {
        color: #fff;
    }

    .link-cta span {
        position: relative;
        z-index: 1;
    }

    /* Responsividade Mobile */
    @media (max-width: 768px) {
        .footer-wrapper {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .footer-menus {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .footer {
            padding: 40px 20px;
        }

        .mobile {
            display: block;
        }

        .desktop {
            display: none;
        }

        .footer-socials {
            justify-content: flex-start;
        }

        .footer-cert {
            align-items: flex-start;
            text-align: left;
        }
    }

    @media (max-width: 480px) {
        .cta-box {
            padding: 40px 20px;
        }

        .cta-box h2 {
            font-size: 1.5rem;
        }

        .footer-col.left {
            gap: 30px;
        }

        .app-buttons {
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-socials {
            gap: 15px;
        }

        .footer-socials img {
            width: 24px;
            height: 24px;
        }
    }
</style>