// Função para criar os blocos com base nos dados fornecidos
function criarBlocos(dados) {
    // Limpar o container de blocos
    entrada_1.innerHTML = '';

    // Iterar sobre o array de dados dos blocos
    dados.forEach(dadosDoBloco => {

        const Painel = document.createElement('main');
        Painel.classList.add('Corpo');
        const Capitulo_1 = document.createElement('section');
        Capitulo_1.classList.add('Capitulos_1');
        const Capitulo_2 = document.createElement('section');
        Capitulo_2.classList.add('Capitulos_2')
        // Adicionar o painel ao bloco

        const sub_tela_1 = document.createElement('a');
        sub_tela_1.href = dadosDoBloco.Botao_1_A;
        sub_tela_1.target = 'iframe';
        Capitulo_1.appendChild(sub_tela_1);
        const chama_tela_1 = document.createElement('div');
        chama_tela_1.classList.add('reação');
        sub_tela_1.appendChild(chama_tela_1);
        const conteudo_tela_1 = document.createElement('p');
        conteudo_tela_1.textContent = dadosDoBloco.Botao_1_P;
        chama_tela_1.appendChild(conteudo_tela_1);

        const sub_tela_2 = document.createElement('a');
        sub_tela_2.href = dadosDoBloco.Botao_2_A;
        sub_tela_2.target = 'iframe';
        Capitulo_1.appendChild(sub_tela_2);
        const chama_tela_2 = document.createElement('div');
        chama_tela_2.classList.add('reação');
        sub_tela_2.appendChild(chama_tela_2);
        const conteudo_tela_2 = document.createElement('p');
        conteudo_tela_2.textContent = dadosDoBloco.Botao_2_P;
        chama_tela_2.appendChild(conteudo_tela_2);

        const sub_tela_3 = document.createElement('a');
        sub_tela_3.href = dadosDoBloco.Botao_3_A;
        sub_tela_3.target = 'iframe';
        Capitulo_1.appendChild(sub_tela_3);
        const chama_tela_3 = document.createElement('div');
        chama_tela_3.classList.add('reação');
        sub_tela_3.appendChild(chama_tela_3);
        const conteudo_tela_3 = document.createElement('p');
        conteudo_tela_3.textContent = dadosDoBloco.Botao_3_P;
        chama_tela_3.appendChild(conteudo_tela_3);

        const sub_tela_4 = document.createElement('a');
        sub_tela_4.href = dadosDoBloco.Botao_4_A;
        sub_tela_4.target = 'iframe';
        Capitulo_1.appendChild(sub_tela_4);
        const chama_tela_4 = document.createElement('div');
        chama_tela_4.classList.add('reação');
        sub_tela_4.appendChild(chama_tela_4);
        const conteudo_tela_4 = document.createElement('p');
        conteudo_tela_4.textContent = dadosDoBloco.Botao_4_P;
        chama_tela_4.appendChild(conteudo_tela_4);

        const sub_tela_5 = document.createElement('a');
        sub_tela_5.href = dadosDoBloco.Botao_5_A;
        sub_tela_5.target = 'iframe';
        Capitulo_1.appendChild(sub_tela_5);
        const chama_tela_5 = document.createElement('div');
        chama_tela_5.classList.add('reação');
        sub_tela_5.appendChild(chama_tela_5);
        const conteudo_tela_5 = document.createElement('p');
        conteudo_tela_5.textContent = dadosDoBloco.Botao_5_P;
        chama_tela_5.appendChild(conteudo_tela_5);


        const Tela = document.createElement('iframe');
        Tela.src = dadosDoBloco.Tela;
        Tela.name = 'iframe';
        Capitulo_2.appendChild(Tela);

        Painel.appendChild(Capitulo_1);
        Painel.appendChild(Capitulo_2);

        // Adicionar o bloco ao container de blocos
        entrada_1.appendChild(Painel);
    });
}

criarBlocos(dadosDoBloco);

var temas = document.querySelectorAll('.reação')

function selectLink() {
    temas.forEach((item) =>
        item.classList.remove('ativo')
    )
    this.classList.add('ativo')
}
temas.forEach((item) =>
    item.addEventListener('click', selectLink))