const swiper = new Swiper('.galeria', {
    direction: 'horizontal',
    loop: true,

    pagination: {
        el: '.galeria-pagination',
    },
    autoplay: {
        delay: 8000,
    },
});
const meta =80000;
let arrecadado = 13023.00;
let apoiadores = 992;
let coracoes = 278;

const arrayDados = [
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 40, coracoes: 1 },
    { nome: "Juliana Aparecida", image: "https://i.pinimg.com/474x/3c/68/f1/3c68f178eed9f0c7e12e81ce311ce742.jpg", apoiador: 1, doado: 30, coracoes: 0 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 100, coracoes: 1 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 113.20, coracoes: 0 },
    { nome: "Lucas Fernandes", image: "https://i.pinimg.com/736x/eb/0b/8e/eb0b8ed1fccf760906d3b662f11a7ab4.jpg", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 100, coracoes: 1 },
    { nome: "Fernanda Oliveira", image: "https://img.elo7.com.br/product/600x380/68F9A/rosto-mulher-estilizada.jpg", apoiador: 1, doado: 200, coracoes: 0 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 50, coracoes: 1 },
    { nome: "João Castro", image: "https://lenscope.com.br/blog/wp-content/uploads/2023/06/homem-na-loja-experimentando-oculos-1200x900.jpg", apoiador: 1, doado: 40, coracoes: 0 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 100, coracoes: 1 },
    { nome: "Marcela de Moraes", image: "https://s2-g1.glbimg.com/-QmmfN5miVkJootci3GIgF4v_lo=/0x227:720x818/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2020/o/w/LcL9dKRgWrZ9pAFcAQtw/thais-francisca.jpg", apoiador: 1, doado: 50, coracoes: 0 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 250, coracoes: 0 },
    { nome: "Marcelo Rodrigues", image: "https://img.freepik.com/fotos-gratis/retrato-de-um-homem-de-bangladesh_53876-15106.jpg?semt=ais_incoming&w=740&q=80", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Taís Costa", image: "https://images.unsplash.com/photo-1520529277867-dbf8c5e0b340?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 100, coracoes: 0 },
    { nome: "Doador anônimo", image: "https://png.pngtree.com/png-vector/20220608/ourlarge/pngtree-anonymous-user-unidentified-contact-avatar-png-image_4816655.png", apoiador: 1, doado: 40, coracoes: 1 },
    { nome: "Manoel Caetano Santos", image: "https://img.freepik.com/fotos-gratis/vista-frontal-do-homem-posando_23-2148364843.jpg?semt=ais_incoming&w=740&q=80", apoiador: 1, doado: 30, coracoes: 0 }
];

let index = 0;

function atualizarValores() {
    if (index >= arrayDados.length) return;
    
    let item = arrayDados[index];
    apoiadores += item.apoiador;
    coracoes += item.coracoes;
    animarValor("apoiadores", apoiadores);
    animarValor("coracoes", coracoes);

    let novoValor = arrecadado + item.doado;
    animarValor("doado", novoValor, arrecadado);
    arrecadado = novoValor;
    
    exibirNotificacao(item.nome, item.image, item.doado);
    atualizarBarra();
    index++;
}

function atualizarBarra() {
    let porcentagem = (arrecadado / meta) * 100;
    let porcento = Math.round(porcentagem );
    document.getElementById("barra").style.width = porcentagem + "%";
    document.getElementById("barraMobile").style.width = porcentagem + "%";
    document.getElementById("porcentagem").innerHTML = porcento + "%";
}

function formatarMoeda(valor) {
    return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(valor);
}

function animarValor(id, novoValor, valorAntigo = 0) {
    let elementos = document.querySelectorAll(`#${id}, #valorMobile`);
    let inicio = valorAntigo || parseFloat(elementos[0].innerText.replace(/[^0-9.,]/g, "")) || 0;
    let incremento = (novoValor - inicio) / 50;
    let atual = inicio;
    let contador = 0;
    
    let animacao = setInterval(() => {
        atual += incremento;
        elementos.forEach(elemento => {
            elemento.innerText = id === "doado" ? formatarMoeda(atual) : atual.toFixed(0);
        });

        contador++;
        if (contador >= 50) {
            clearInterval(animacao);
            elementos.forEach(elemento => {
                elemento.innerText = id === "doado" ? formatarMoeda(novoValor) : novoValor;
            });
        }
    }, 20);
}

function exibirNotificacao(nome, image, valor) {
    let notificacao = document.createElement("div");
    notificacao.className = "notificacao";
    notificacao.innerHTML = `<div class="avatar"><img src="${image}" alt="${nome}"></div><div class="content"><h4>${nome}</h4> Acabou de doar <strong>${formatarMoeda(valor)}</strong>.</div>`;
    
    document.body.appendChild(notificacao);

    setTimeout(() => {
        let rect = notificacao.getBoundingClientRect();

        confetti({
            particleCount: 100,
            spread: 70,
            origin: {
                x: (rect.left + rect.width / 2) / window.innerWidth,
                y: (rect.top + rect.height / 2) / window.innerHeight
            }
        });
    }, 100);
    
    setTimeout(() => {
        notificacao.style.transform = "translatey(0)";
        notificacao.style.opacity = "0";
        setTimeout(() => notificacao.remove(), 500);
    }, 6000);
}

setInterval(atualizarValores, 30000);

document.addEventListener("DOMContentLoaded", () => {
    atualizarBarra();
});

document.addEventListener("DOMContentLoaded", () => {
    let script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js";
    document.head.appendChild(script);
});