`; updateUiState(); } function updateUiState() { // Update indicators const indicators = stepIndicatorsContainer.querySelectorAll('.step-indicator'); indicators.forEach((ind, i) => { ind.classList.toggle('step-active', i === currentPhase); ind.classList.toggle('step-inactive', i !== currentPhase); }); // Update buttons prevBtn.disabled = currentPhase === 0; nextBtn.disabled = currentPhase === SCRIPT_DATA.length - 1; // Update counter phaseCounter.textContent = `Phase ${currentPhase + 1} / ${SCRIPT_DATA.length}`; } function populateBestPractices() { BEST_PRACTICES.forEach(practice => { const card = document.createElement('div'); card.className = 'bg-white p-6 rounded-xl shadow-md border border-stone-200'; card.innerHTML = `

${practice.title}

${practice.text}

`; bestPracticesContainer.appendChild(card); }); } function initializeApp() { setupIndicators(); populateBestPractices(); showPhase(0); nextBtn.addEventListener('click', () => { if (currentPhase < SCRIPT_DATA.length - 1) { showPhase(currentPhase + 1); } }); prevBtn.addEventListener('click', () => { if (currentPhase > 0) { showPhase(currentPhase - 1); } }); } initializeApp(); });