` }; function renderContent(sectionId) { if (!contentArea || !CONTENT_DATA[sectionId]) return; contentArea.innerHTML = CONTENT_DATA[sectionId]; // Re-attach event listeners for interactive elements if (sectionId === 'economic') { attachCalculatorListener(); } if (sectionId === 'conclusion') { attachRecListener(); } } function attachCalculatorListener() { const calcBtn = document.getElementById('calc-btn'); const investmentEl = document.getElementById('calc-investment'); const savingEl = document.getElementById('calc-saving'); const resultEl = document.getElementById('calc-result'); if (calcBtn) { calcBtn.addEventListener('click', () => { const investment = parseFloat(investmentEl.value); const saving = parseFloat(savingEl.value); if (investment > 0 && saving > 0) { const payback = investment / saving; resultEl.textContent = `Simple Payback Period: ${payback.toFixed(2)} years`; } else { resultEl.textContent = 'Please enter valid numbers > 0'; } }); } } function attachRecListener() { const recButtons = document.getElementById('rec-buttons'); const recBoxes = document.getElementById('rec-boxes'); if (recButtons) { recButtons.addEventListener('click', (e) => { const targetBtn = e.target.closest('button'); if (!targetBtn) return; const targetId = targetBtn.dataset.target; // Reset all recButtons.querySelectorAll('button').forEach(btn => { btn.classList.remove('active-proceed', 'active-postpone', 'active-abandon'); }); recBoxes.querySelectorAll('div').forEach(box => box.classList.add('hidden')); // Activate selected const targetBox = document.getElementById(targetId); if (targetId === 'rec-proceed') targetBtn.classList.add('active-proceed'); if (targetId === 'rec-postpone') targetBtn.classList.add('active-postpone'); if (targetId === 'rec-abandon') targetBtn.classList.add('active-abandon'); if(targetBox) targetBox.classList.remove('hidden'); }); } } function setActiveLink(targetLink) { nav.querySelectorAll('a.nav-link').forEach(link => link.classList.remove('active')); targetLink.classList.add('active'); } nav.addEventListener('click', (e) => { const link = e.target.closest('a.nav-link'); if (link) { e.preventDefault(); const sectionId = link.dataset.target; renderContent(sectionId); setActiveLink(link); // Scroll main content to top contentArea.scrollTo({ top: 0, behavior: 'smooth' }); } }); // Initial Load renderContent('execSummary'); setActiveLink(nav.querySelector('a[data-target="execSummary"]')); });