codigo corrigido.

const html = document.querySelector('html'); const focoBt = document.querySelector('.app__card-button--foco'); const curtoBt = document.querySelector('.app__card-button--curto'); const longoBt = document.querySelector('.app__card-button--longo'); const banner = document.querySelector('.app__image'); const titulo = document.querySelector('.app__title'); const botoes = document.querySelectorAll('.app__card-button');

focoBt.addEventListener('click', () => { alterarContexto('foco'); });

curtoBt.addEventListener('click', () => { alterarContexto('descanso-curto'); });

longoBt.addEventListener('click', () => { alterarContexto('descanso-longo'); });

function alterarContexto(Contexto) { botoes.forEach(function (botao) { botao.classList.remove('active'); }); if (Contexto === 'foco') { focoBt.classList.add('active'); } else if (Contexto === 'descanso-curto') { curtoBt.classList.add('active'); } else if (Contexto === 'descanso-longo') { longoBt.classList.add('active'); }

html.setAttribute('data-contexto', Contexto);
banner.setAttribute('src', `/imagens/${Contexto}.png`);

switch (Contexto) {
    case "foco":
        titulo.innerHTML = `
            Otimize sua produtividade,<br>
            <strong class="app__title-strong">mergulhe no que importa.</strong>
        `;
        break;
    case "descanso-curto":
        titulo.innerHTML = `
            Que tal dar uma respirada? <strong class="app__title-strong">Faça uma pausa curta!</strong>
        `;
        break;
    case "descanso-longo":
        titulo.innerHTML = `
            Hora de voltar à superfície.<strong class="app__title-strong"> Faça uma pausa longa.</strong>
        `;
        break;
    default:
        break;
}

}