script.js

const cardContainer = document.querySelector(".card-container");
const campoBusca = document.getElementById("campo-busca");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const navMenu = document.querySelector(".nav-menu");
let dados = [];

// Carrega os dados do JSON uma única vez quando a página é carregada
document.addEventListener("DOMContentLoaded", async () => {
    try {
        const resposta = await fetch("data.json");
        dados = await resposta.json();
        // Se estivermos na página inicial, renderiza todos os cards
        if (cardContainer) {
            renderizarCards(dados);
        }
    } catch (error) {
        console.error("Erro ao carregar os dados dos baralhos:", error);
        if (cardContainer) {
            cardContainer.innerHTML = "<p>Não foi possível carregar os dados. Tente novamente mais tarde.</p>";
        }
    }
});

// Lógica para o menu hambúrguer
hamburgerBtn.addEventListener("click", () => {
    hamburgerBtn.classList.toggle("active");
    navMenu.classList.toggle("open");
});

// Permite que a busca seja acionada com a tecla "Enter"
if (campoBusca) {
    campoBusca.addEventListener("keyup", function(event) {
        if (event.key === "Enter") {
            iniciarBusca();
        }
    });
    campoBusca.addEventListener("input", iniciarBusca);
}

function iniciarBusca() {
    const termoBusca = campoBusca.value.toLowerCase().trim();
    
    // Limpa os destaques anteriores
    document.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));

    // Se estiver na página inicial, filtra os cards
    if (cardContainer) {
        const dadosFiltrados = dados.filter(dado => 
            dado.nome.toLowerCase().includes(termoBusca) || 
            dado.descricao.toLowerCase().includes(termoBusca)
        );
        renderizarCards(dadosFiltrados);
    }

    // Outra lógica de filtro
// let inputBusca = document.querySelector("input[type='text']");
// let termoBusca = inputBusca.value.toLowerCase();
// let dadosFiltrados = [];

// for (let dado of dados) {
//     console.log(dado);
//     if (dado.nome.toLowerCase().includes(termoBusca) 
//         || dado.descricao.toLowerCase().includes(termoBusca)
//         || dado.ano.toString().includes(termoBusca)) {
        
//         dadosFiltrados.push(dado);
//     }
// }
    
    
    // Se a busca for vazia, ou o termo for muito curto, não faz a busca no conteúdo estático
    if (!termoBusca || termoBusca.length < 2) {
        return;
    }

    // Busca o termo nas outras seções da página
    const secoes = document.querySelectorAll('.page-section, .card-container > article'); 
    let primeiraSecaoEncontrada = null;

    secoes.forEach(secao => {
        if (secao.textContent.toLowerCase().includes(termoBusca)) {
            secao.classList.add('highlight');
            if (!primeiraSecaoEncontrada) {
                primeiraSecaoEncontrada = secao;
            }
        }
    });
}

    // Aplicar scroll para o primeiro elemento encontrado.
    if (primeiraSecaoEncontrada) {
        primeiraSecaoEncontrada.scrollIntoView({
            behavior: 'smooth', // Rola suavemente
            block: 'start'      // Alinha o topo do elemento com o topo da área de visualização
        });
    }

function renderizarCards(dadosParaRenderizar) {
    // Garante que a função só execute se o container de cards existir na página
    if (!cardContainer) return;

    cardContainer.innerHTML = ""; // Limpa o container antes de renderizar novos cards
    if (dadosParaRenderizar.length === 0) {
        cardContainer.innerHTML = `<p class="page-section">Nenhum baralho encontrado para a sua busca.</p>`;
        return;
    }

    for (const dado of dadosParaRenderizar) {
        cardContainer.innerHTML += `
        <article class="card">
            <h2 class="header-subtitle">🀧 ${dado.nome}</h2>
            <p>Ano: ${dado.ano}</p>
            <p>${dado.descricao}</p>
            <a href="${dado.link}" target="_blank" rel="noopener noreferrer">Veja mais</a>
        `;
    }
}