Manual changes saved

scorecard.html

@@ -193,248 +193,208 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // --- UI ELEMENTS & SETUP ---
     AOS.init({ once: true, duration: 600 });
     feather.replace();
 
-    // Mobile Menu Toggle
-    const mobileMenuButton = document.getElementById('mobileMenuButton');
-    const mobileMenu = document.getElementById('mobileMenu');
-    mobileMenuButton.addEventListener('click', () => {
-        mobileMenu.classList.toggle('hidden');
-        mobileMenuButton.classList.toggle('open');
-    });
-
-    // Theme Toggle
-    const themeToggle = document.getElementById('themeToggle');
-    const html = document.documentElement;
-    themeToggle.addEventListener('click', () => {
-        html.classList.toggle('dark');
-        localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
-        feather.replace();
-    });
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-        html.classList.add('dark');
-    } else {
-        html.classList.remove('dark');
-    }
-
-    // Set active nav link
-    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
-    document.querySelectorAll('.nav-link').forEach(link => {
-        if (link.getAttribute('href') === currentPage) {
-            link.classList.add('active');
-        } else {
-            link.classList.remove('active');
-        }
-    });
-
     // --- DATA & STATE MANAGEMENT ---
     const questions = [
-        { section: 'IDENTIFIED PAIN', question: 'Is our deal attached to addressing the customer\'s top business pain?', answers: [ { text: 'Economic Buyer Agrees Pain/Project A Top Business Priority', score: 9 }, { text: 'Identified Pain: Specific Business Project/Need Agreed', score: 7 }, { text: 'Needs/Pain Partially Defined (Scope / Personas Missing)', score: 4 }, { text: 'Needs/Pain Unqualified (Project / Personas Unknown)', score: 1 }, { text: 'No Project Identified Yet; Evaluating Technologies Only', score: -3 } ] },
-        { section: 'CHAMPIONS', question: 'Are we engaged directly with the right personas or stakeholders?', answers: [ { text: 'Champions & Economic Buyer Are Fully Engaged', score: 9 }, { text: 'Champion Incentivised & Accessing Economic Buyer', score: 6 }, { text: 'Established Relationship With A Qualified Champion', score: 4 }, { text: 'Project-Level Contacts Only, Searching For Champions', score: 0 }, { text: 'No Champions / Key Stakeholders Identified Yet', score: -3 } ] },
-        { section: 'GO LIVE PLAN', question: 'Has a Go Live Proposal been accepted by all key decision makers?', answers: [ { text: 'Key Stakeholders Agree; Awaiting Signature', score: 9 }, { text: 'Economic Buyer Agrees & Has Validated Plan', score: 8 }, { text: 'Champion/Partner Collaborating To Complete Plan', score: 4 }, { text: 'Discussing Project & Timescales; Plan Incomplete', score: 0 }, { text: 'Too Early For Go Live Proposal', score: -3 } ] },
-        { section: 'METRICS & MOTIVES', question: 'Have METRICS or a QBC been agreed by the ECONOMIC BUYER?', answers: [ { text: 'All Key Stakeholders & Buyers Agree Metrics / QBC', score: 9 }, { text: 'Champion Says Economic Buyer Agrees Metrics / QBC', score: 7 }, { text: 'We/Our Partner & Champion All Agree Metrics / QBC', score: 4 }, { text: 'Only We/Our Partner Understand Metrics / QBC', score: 0 }, { text: 'Metrics / Motives Not Yet Identified', score: -3 } ] },
-        { section: 'DECISION CRITERIA', question: 'Do we have clearly defined and agreed DECISION CRITERIA?', answers: [ { text: 'Our Decision Criteria Preferred By Economic Buyer', score: 9 }, { text: 'Economic Buyer Agrees We Meet Requirements', score: 8 }, { text: 'Criteria Co-Authored & Agreed with Champion', score: 6 }, { text: 'Customer Sharing Specific Criteria For Demo/POC', score: 4 }, { text: 'Customer Using Own Criteria; Unclear If We Meet It', score: 0 }, { text: 'Buying Criteria Unknown/Incomplete', score: -3 } ] },
-        { section: 'DECISION PROCESS', question: 'Why now? What is the compelling event?', answers: [ { text: 'Critical reason for this month or specific date', score: 9 }, { text: 'Financial or Strategic Impact to Champion / Business if delayed', score: 7 }, { text: 'No Compelling Reason, But Timeline Agreed', score: 4 }, { text: 'Engaged But No Compelling Reason Provided', score: 2 }, { text: 'Salesperson\'s timeline', score: -3 } ] },
-        { section: 'COMPETITION', question: 'Does the customer prefer us to the COMPETITION?', answers: [ { text: 'Economic Buyer / Partner Agrees We Are Preferred Supplier', score: 9 }, { text: 'Economic Buyer Agrees Our Differentiators Address Pain', score: 7 }, { text: 'Champion/Partner Prefers Our Differentiators; Traps Set', score: 5 }, { text: 'Competition Identified, Differentiation Agreed As Of Interest', score: 3 }, { text: 'Competition Identified, But Not Confirmed As Preferred', score: 0 }, { text: 'Not Asked About Competition Yet', score: -3 } ] },
-        { section: 'BLOCKERS?', question: 'Have we identified ALL potential blockers?', answers: [ { text: 'All stakeholders agree on plan to address all blockers', score: 9 }, { text: 'Economic Buyer agrees to help address identified blockers', score: 7 }, { text: 'Blockers Identified & Discussing With Champion / Partner', score: 4 }, { text: 'We suspect blockers; haven\'t asked customer directly', score: 0 }, { text: 'No blockers identified yet', score: -3 } ] },
-        { section: 'ECONOMIC BUYER', question: 'Has budget availability been confirmed?', answers: [ { text: 'Economic Buyer Says Budget Signed Off & Secured', score: 9 }, { text: 'Economic Buyer Says Significant Budget assigned', score: 7 }, { text: 'Champion/Partner Says Budget Exists; Amount Unknown', score: 4 }, { text: 'Champion/Partner Confirms Budget Assigned Soon', score: 2 }, { text: 'Champion/Partner Still Trying To Secure Budget', score: 0 }, { text: 'Budget Source Not Yet Known', score: -3 } ] },
-        { section: 'PAPER PROCESS', question: 'Where are we with pricing & contractual terms?', answers: [ { text: 'Pricing/Contract & Terms Agreed and Approved', score: 9 }, { text: 'Contract/Terms Agreed; Legal Departments Engaged', score: 7 }, { text: 'Quantified Business Case Agreed, Security/Privacy Teams Engaged', score: 5 }, { text: 'Negotiating; Building Business Case But Gaps Remain', score: 4 }, { text: 'Customer/Partner has requested proposal', score: 2 }, { text: 'Pricing / contract not discussed yet', score: -5 } ] }
+        { 
+            section: 'PAIN & METRICS',
+            subheading: 'Section 1: The Opportunity',
+            question: 'What is the quantifiable business pain?',
+            answers: [
+                { text: 'EB agrees on a top-priority pain with a quantified business case (QBC)', score: 9 },
+                { text: 'Champion agrees on the pain and we are building the business case', score: 6 },
+                { text: 'Pain is defined but lacks clear metrics and EB involvement', score: 3 },
+                { text: 'Pain is vague and no metrics have been discussed', score: 0 }
+            ] 
+        },
+        { 
+            section: 'CHAMPION & EB',
+            subheading: 'Section 1: The Opportunity',
+            question: 'How strong is our relationship with the key personas?',
+            answers: [
+                { text: 'Our Champion is selling on our behalf and we have EB engagement', score: 9 },
+                { text: 'We have a tested Champion who is providing access to power', score: 6 },
+                { text: 'We have a potential Champion but they are not yet tested', score: 3 },
+                { text: 'No Champion or Economic Buyer identified', score: 0 }
+            ] 
+        },
+        { 
+            section: 'DECISION PROCESS & CRITERIA',
+            subheading: 'Section 2: The Decision',
+            question: 'How will the decision be made and what are the requirements?',
+            answers: [
+                { text: 'We influenced the criteria and the process is confirmed with the EB', score: 9 },
+                { text: 'We know the process and criteria and believe we are aligned', score: 6 },
+                { text: 'The decision process or criteria are partially understood', score: 3 },
+                { text: 'The process and criteria are a black box', score: 0 }
+            ] 
+        },
+        { 
+            section: 'COMPETITION & BLOCKERS',
+            subheading: 'Section 2: The Decision',
+            question: 'What internal and external forces can stop this deal?',
+            answers: [
+                { text: 'We are seen as the preferred vendor and all blockers have a mitigation plan', score: 9 },
+                { text: 'Competition is known, traps are set, and some blockers are identified', score: 6 },
+                { text: 'We know of competitors but have not identified potential blockers', score: 3 },
+                { text: 'Competitive landscape and internal blockers are unknown', score: 0 }
+            ] 
+        },
+        { 
+            section: 'PAPER PROCESS',
+            subheading: 'Section 3: The Logistics',
+            question: 'How aligned are we on the procurement and legal process?',
+            answers: [
+                { text: 'Pricing, contract, and security review process are fully confirmed', score: 9 },
+                { text: 'We have had initial discussions on budget and the paper process', score: 6 },
+                { text: 'A budget is confirmed but the paper process has not been discussed', score: 3 },
+                { text: 'Budget and procurement process are unknown', score: 0 }
+            ] 
+        },
+        { 
+            section: 'IMPLEMENTATION PLAN',
+            subheading: 'Section 3: The Logistics',
+            question: 'Is there a clear, agreed-upon plan for success after signing?',
+            answers: [
+                { text: 'All stakeholders have agreed to a formal, joint implementation plan', score: 9 },
+                { text: 'We have shared a draft implementation plan with our Champion', score: 6 },
+                { text: 'Implementation has been discussed but no formal plan exists', score: 3 },
+                { text: 'The post-sale process has not been discussed', score: 0 }
+            ] 
+        }
     ];
 
-    const industryInsights = {
-        'FSI': 'Financial Services buyers prioritize regulatory compliance, data security, and ultra-low latency for real-time transactions and fraud detection.', 'Healthcare': 'Healthcare organizations focus on HIPAA/GDPR compliance, interoperability with EHR/EMR systems, and AI-driven patient data privacy.', 'Public Sector & Education': 'Public Sector & Education buyers value cost efficiency, scalability for public demand, and strict adherence to government/educational data policies.', 'Retail and Ecommerce': 'Retail and Ecommerce companies need seamless omnichannel integration, AI-powered personalization, and real-time inventory/analytics.', 'Tech (SaaS)': 'Tech (SaaS) companies look for developer-friendly APIs, scalability for user growth, and AI/ML tools for product innovation.', 'Cyber': 'Cyber security teams require advanced threat detection, zero-trust architecture, and AI-driven automation for rapid incident response.', 'Media and Entertainment': 'Media and Entertainment firms need high-performance content delivery, AI for recommendation engines, and scalable storage for large media files.', 'Manufacturing': 'Manufacturing companies value predictive maintenance, IoT integration, and AI for supply chain optimization and defect detection.', 'Energy': 'Energy sector focuses on AI for predictive analytics in asset management, compliance with energy regulations, and operational resilience.', 'Logistics': 'Logistics companies prioritize real-time tracking, AI for route optimization, and integration with global supply chain platforms.', 'Transport': 'Transportation firms need AI for fleet management, real-time analytics for safety/compliance, and scalable IoT integration.', 'Startups': 'Startups typically look for pay-as-you-go pricing, rapid deployment, and AI tools that accelerate MVP development and scaling.'
+    const industryInsights = { 'FSI': 'FSI buyers prioritize regulatory compliance, data security, and low latency for transactions and fraud detection.', 'Healthcare': 'Healthcare focuses on HIPAA/GDPR compliance, interoperability with EHR systems, and patient data privacy.', 'Public Sector & Education': 'Public Sector buyers value cost efficiency, scalability, and adherence to government/educational data policies.', 'Retail and Ecommerce': 'Retail needs omnichannel integration, AI-powered personalization, and real-time inventory/analytics.', 'Tech (SaaS)': 'SaaS companies look for developer-friendly APIs, scalability, and AI/ML tools for product innovation.', 'Cyber': 'Cyber security teams require advanced threat detection, zero-trust architecture, and AI-driven automation for incident response.', 'Media and Entertainment': 'Media firms need high-performance content delivery, AI for recommendation engines, and scalable storage.', 'Manufacturing': 'Manufacturing values predictive maintenance, IoT integration, and AI for supply chain optimization.', 'Energy': 'The Energy sector focuses on AI for predictive analytics, regulatory compliance, and operational resilience.', 'Logistics': 'Logistics companies prioritize real-time tracking, AI for route optimization, and supply chain integration.', 'Transport': 'Transportation firms need AI for fleet management, real-time analytics for safety/compliance, and IoT integration.', 'Startups': 'Startups look for pay-as-you-go pricing, rapid deployment, and AI tools to accelerate MVP development.' };
+    const summarySnippets = { 'PAIN & METRICS': 'Solidify the business case by quantifying the pain with the Economic Buyer.', 'CHAMPION & EB': 'Test your Champion and leverage them for greater access to the Economic Buyer.', 'DECISION PROCESS & CRITERIA': 'Influence the decision criteria and get the formal process in writing.', 'COMPETITION & BLOCKERS': 'Set competitive traps and proactively identify all potential deal blockers.', 'PAPER PROCESS': 'De-risk the closing stage by confirming the budget source and procurement process early.', 'IMPLEMENTATION PLAN': 'Co-create a success plan with the customer to show value beyond the signature.' };
+    const industrySpecificAdvice = { 'FSI': { 'PAIN & METRICS': 'Frame the pain in terms of regulatory compliance (e.g., GDPR), risk mitigation, or fraud detection. FSI buyers are heavily motivated by these.', 'PAPER PROCESS': 'The legal and compliance review in FSI is rigorous. Proactively provide security documentation to accelerate this stage.' }, 'Healthcare': { 'PAIN & METRICS': 'Pain in Healthcare is often tied to patient data privacy (HIPAA) or interoperability with EHR/EMR systems. Align with these.', 'DECISION PROCESS & CRITERIA': 'Criteria will heavily weigh on data security and HIPAA compliance. Position yourself as the most secure option.' }, 'Tech (SaaS)': { 'COMPETITION & BLOCKERS': 'The SaaS market is crowded. Your competitive advantage must be crystal clear—is it APIs, integrations, or UX?', 'IMPLEMENTATION PLAN': 'Offer a "quick start" or phased implementation plan. SaaS buyers value rapid time-to-value.' } };
+
+    // --- DOM & STATE ---
+    const app = {
+        screens: { industry: document.getElementById('industry-screen'), questions: document.getElementById('question-screens'), results: document.getElementById('results-screen') },
+        inputs: { industry: document.getElementById('industry'), salesStage: document.getElementById('sales-stage'), startBtn: document.getElementById('start-btn') },
+        ui: { progressBar: document.getElementById('progress-bar'), scorePercentage: document.getElementById('score-percentage'), scoreMessage: document.getElementById('score-message'), industryInsights: document.getElementById('industry-insights'), scoreBreakdown: document.getElementById('score-breakdown'), executiveSummary: document.getElementById('executive-summary') },
+        buttons: { restart: document.getElementById('restart-quiz'), themeToggle: document.getElementById('themeToggle'), mobileMenu: document.getElementById('mobileMenuButton') },
+        state: { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: questions.length * 9 }
     };
     
-    const industrySpecificAdvice = {
-        'FSI': { 'IDENTIFIED PAIN': 'Frame the pain in terms of regulatory compliance, risk mitigation, or fraud detection. FSI buyers are heavily motivated by these pressures.', 'METRICS & MOTIVES': 'Focus on metrics like ROI, reduction in compliance penalties, and cost of capital. The Economic Buyer will need a business case built on these specific KPIs.', 'PAPER PROCESS': 'The legal and compliance review in FSI is rigorous. Proactively provide security documentation and compliance certificates to accelerate this stage.' }, 'Healthcare': { 'IDENTIFIED PAIN': 'Pain in Healthcare is often tied to patient data privacy (HIPAA), interoperability with EHR/EMR systems, or improving patient outcomes. Your solution must align with these critical areas.', 'CHAMPIONS': 'A strong champion in Healthcare is often a clinical leader who feels the pain directly, not just an IT manager. Find someone whose goals are tied to patient care or operational efficiency.', 'DECISION CRITERIA': 'Criteria will heavily weigh on data security and HIPAA compliance. Ensure you are positioned as the most secure and compliant option against competitors.' }, 'Tech (SaaS)': { 'COMPETITION': 'The SaaS market is crowded. Your competitive advantage must be crystal clear—is it developer-friendly APIs, better integration capabilities, or a superior UX? Hammer this point with your champion.', 'ECONOMIC BUYER': 'Confirm the budget source. Is it coming from an operational budget, or does it require a new capital expenditure request? This dramatically impacts the timeline in fast-moving tech companies.', 'GO LIVE PLAN': 'Offer a "quick start" or phased implementation plan. SaaS buyers value rapid time-to-value and want to see an impact quickly.' }
-    };
-
-    const summarySnippets = {
-        'IDENTIFIED PAIN': 'Clarify and quantify the business pain with the Economic Buyer.', 'CHAMPIONS': 'Develop a stronger relationship with your champion or find a new one closer to the EB.', 'GO LIVE PLAN': 'Formalize the implementation plan and get stakeholder buy-in.', 'METRICS & MOTIVES': 'Agree on measurable success metrics (QBC) that align with business goals.', 'DECISION CRITERIA': 'Influence the decision criteria to favor your unique strengths.', 'DECISION PROCESS': 'Establish a compelling event to create urgency.', 'COMPETITION': 'Set competitive traps and clearly articulate your unique differentiators.', 'BLOCKERS?': 'Identify all potential blockers and create a mitigation plan.', 'ECONOMIC BUYER': 'Secure access to the Economic Buyer and confirm budget.', 'PAPER PROCESS': 'De-risk the procurement stage by engaging with legal and security early.'
-    };
-
-    // DOM elements
-    const industryScreen = document.getElementById('industry-screen');
-    const industrySelect = document.getElementById('industry');
-    const salesStageSelect = document.getElementById('sales-stage');
-    const startBtn = document.getElementById('start-btn');
-    const questionScreens = document.getElementById('question-screens');
-    const progressBar = document.getElementById('progress-bar');
-    const resultsScreen = document.getElementById('results-screen');
-    const scorePercentage = document.getElementById('score-percentage');
-    const scoreMessage = document.getElementById('score-message');
-    const industryInsightsDiv = document.getElementById('industry-insights');
-    const scoreBreakdown = document.getElementById('score-breakdown');
-    const executiveSummary = document.getElementById('executive-summary');
-    const restartQuizBtn = document.getElementById('restart-quiz');
-
-    // App state
-    let currentQuestion = 0;
-    let selectedIndustry = '';
-    let selectedSalesStage = '';
-    let userAnswers = [];
-    const maxPossibleScore = questions.length * 9;
-
     // --- EVENT LISTENERS ---
-    function checkSelections() {
-        startBtn.disabled = !(selectedIndustry && selectedSalesStage);
-    }
-    industrySelect.addEventListener('change', (e) => { selectedIndustry = e.target.value; checkSelections(); });
-    salesStageSelect.addEventListener('change', (e) => { selectedSalesStage = e.target.value; checkSelections(); });
-
-    startBtn.addEventListener('click', function() {
-        industryScreen.classList.add('hidden');
-        questionScreens.classList.remove('hidden');
-        renderQuestion(currentQuestion);
-    });
-
-    restartQuizBtn.addEventListener('click', resetQuiz);
+    app.inputs.industry.addEventListener('change', (e) => { app.state.industry = e.target.value; checkSelections(); });
+    app.inputs.salesStage.addEventListener('change', (e) => { app.state.salesStage = e.target.value; checkSelections(); });
+    app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
+    app.buttons.restart.addEventListener('click', resetQuiz);
+    
+    function checkSelections() { app.inputs.startBtn.disabled = !(app.state.industry && app.state.salesStage); }
 
     // --- CORE FUNCTIONS ---
     function resetQuiz() {
-        currentQuestion = 0;
-        selectedIndustry = '';
-        selectedSalesStage = '';
-        userAnswers = [];
-        industrySelect.value = "";
-        salesStageSelect.value = "";
-        startBtn.disabled = true;
-        resultsScreen.classList.add('hidden');
-        industryScreen.classList.remove('hidden');
+        app.state.currentQuestion = 0;
+        app.state.industry = '';
+        app.state.salesStage = '';
+        app.state.answers = [];
+        app.inputs.industry.value = "";
+        app.inputs.salesStage.value = "";
+        app.inputs.startBtn.disabled = true;
+        app.screens.results.classList.add('hidden');
+        app.screens.industry.classList.remove('hidden');
         AOS.refresh();
     }
 
     function renderQuestion(index) {
-        if (index >= questions.length) {
-            showResults();
-            return;
-        }
+        if (index >= questions.length) { return showResults(); }
         
         const question = questions[index];
-        const progress = ((index) / questions.length) * 100;
-        progressBar.style.width = `${progress}%`;
+        app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
         
         const questionScreen = document.createElement('div');
         questionScreen.className = `question-screen flex flex-col pt-16 p-6 bg-gray-100 dark:bg-gray-900 fade-in`;
         
-        const backButtonHTML = `<button id="back-btn-${index}" class="w-1/3 py-3 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition">Back</button>`;
-        
+        const backButtonHTML = `<button id="back-btn" class="w-1/3 py-3 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition">Back</button>`;
+        const subheadingHTML = `<p class="text-xs font-bold tracking-wider uppercase text-purple-400 mb-2">${question.subheading}</p>`;
+
         questionScreen.innerHTML = `
             <div class="max-w-2xl mx-auto w-full">
                 <div class="mb-4 text-center">
-                    <span class="text-sm font-medium text-purple-600 dark:text-purple-400">${question.section}</span>
+                    ${subheadingHTML}
+                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">${question.section}</span>
                     <h2 class="text-2xl font-bold mt-1 mb-2">${question.question}</h2>
                 </div>
                 <div class="mb-6">
-                    <div class="relative">
-                        <select id="answer-${index}" class="w-full p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none">
-                            <option value="" disabled selected>Select an answer</option>
-                            ${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}
-                        </select>
-                    </div>
-                </div>
-                <div class="flex items-center gap-4">
-                    ${backButtonHTML}
-                    <button id="next-btn-${index}" disabled class="w-2/3 py-3 bg-purple-600 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
-                        ${index === questions.length - 1 ? 'Finish Qualification' : 'Next Question'}
-                    </button>
+                    <div class="relative"><select id="answer-select" class="w-full p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none"><option value="" disabled selected>Select an answer</option>${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}</select></div>
                 </div>
+                <div class="flex items-center gap-4">${backButtonHTML}<button id="next-btn" disabled class="w-2/3 py-3 bg-purple-600 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed">${index === questions.length - 1 ? 'Finish Qualification' : 'Next Question'}</button></div>
             </div>
         `;
         
-        questionScreens.innerHTML = '';
-        questionScreens.appendChild(questionScreen);
+        app.screens.questions.innerHTML = '';
+        app.screens.questions.appendChild(questionScreen);
         feather.replace();
         
-        const answerSelect = document.getElementById(`answer-${index}`);
-        const nextBtn = document.getElementById(`next-btn-${index}`);
-        const backBtn = document.getElementById(`back-btn-${index}`);
+        const answerSelect = document.getElementById('answer-select');
+        const nextBtn = document.getElementById('next-btn');
+        const backBtn = document.getElementById('back-btn');
         
         answerSelect.addEventListener('change', () => { nextBtn.disabled = !answerSelect.value; });
         
         nextBtn.addEventListener('click', () => {
-            userAnswers.push({
-                question: question.question,
-                answer: answerSelect.options[answerSelect.selectedIndex].text,
-                score: parseInt(answerSelect.value),
-                section: question.section
-            });
-            currentQuestion++;
-            renderQuestion(currentQuestion);
+            app.state.answers.push({ section: question.section, answer: answerSelect.options[answerSelect.selectedIndex].text, score: parseInt(answerSelect.value) });
+            app.state.currentQuestion++;
+            renderQuestion(app.state.currentQuestion);
         });
 
         backBtn.addEventListener('click', () => {
-            if (index > 0) {
-                currentQuestion--;
-                userAnswers.pop();
-                renderQuestion(currentQuestion);
-            } else {
-                resetQuiz();
-            }
+            if (index > 0) { app.state.currentQuestion--; app.state.answers.pop(); renderQuestion(app.state.currentQuestion); } else { resetQuiz(); }
         });
     }
 
     function showResults() {
-        questionScreens.classList.add('hidden');
-        resultsScreen.classList.remove('hidden');
+        app.screens.questions.classList.add('hidden');
+        app.screens.results.classList.remove('hidden');
         AOS.refresh();
 
-        const totalScore = userAnswers.reduce((sum, ans) => sum + ans.score, 0);
-        const normalizedScore = Math.max(0, totalScore + (questions.length * 5));
-        const maxNormalizedScore = maxPossibleScore + (questions.length * 5);
-        const percentage = Math.round((normalizedScore / maxNormalizedScore) * 100);
-        
-        scorePercentage.textContent = `${percentage}%`;
+        const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
+        const percentage = Math.round((totalScore / app.state.maxScore) * 100);
         
-        if (percentage >= 80) scoreMessage.textContent = 'High probability of winning! This opportunity is well-qualified.';
-        else if (percentage >= 60) scoreMessage.textContent = 'Good chance of winning. Focus on improving weaker areas.';
-        else if (percentage >= 40) scoreMessage.textContent = 'Moderate chance. Significant improvements needed in several areas.';
-        else scoreMessage.textContent = 'Low probability. Re-evaluate if this opportunity is worth pursuing.';
+        app.ui.scorePercentage.textContent = `${percentage}%`;
         
-        industryInsightsDiv.innerHTML = `<p>${industryInsights[selectedIndustry]}</p>`;
+        if (percentage >= 80) app.ui.scoreMessage.textContent = 'High probability of winning! This opportunity is well-qualified.';
+        else if (percentage >= 60) app.ui.scoreMessage.textContent = 'Good chance of winning. Focus on improving weaker areas.';
+        else if (percentage >= 40) app.ui.scoreMessage.textContent = 'Moderate chance. Significant improvements needed.';
+        else app.ui.scoreMessage.textContent = 'Low probability. Re-evaluate if this opportunity is worth pursuing.';
         
-        scoreBreakdown.innerHTML = '';
-        userAnswers.forEach(answer => {
-            const scoreRatio = (answer.score + 5) / 14;
+        app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
+        app.ui.scoreBreakdown.innerHTML = '';
+
+        app.state.answers.forEach(answer => {
+            const scoreRatio = answer.score / 9;
             let scoreColor = 'text-red-600 dark:text-red-400', recommendationHTML = '';
 
             if (scoreRatio >= 0.7) scoreColor = 'text-green-600 dark:text-green-400';
             else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-600 dark:text-yellow-400';
             
             if (answer.score < 5) {
-                let advice = 'No specific recommendation available. Focus on improving this area.';
-                const genericAdvice = { 'IDENTIFIED PAIN': 'Work with the customer to better define their business pain and how your solution addresses it.', 'CHAMPIONS': 'Identify and engage with champions who can influence the economic buyer.', 'GO LIVE PLAN': 'Develop a clear implementation plan with agreed timelines and milestones.', 'METRICS & MOTIVES': 'Establish clear metrics for success that are agreed by all stakeholders.', 'DECISION CRITERIA': 'Ensure your solution meets the customer\'s decision criteria or work to influence those criteria.', 'DECISION PROCESS': 'Identify and document the compelling reason for the customer to act now.', 'COMPETITION': 'Differentiate your solution and establish why you\'re the preferred choice.', 'BLOCKERS?': 'Proactively identify and address any potential blockers to the deal progressing.', 'ECONOMIC BUYER': 'Confirm budget availability and secure commitment from the economic buyer.', 'PAPER PROCESS': 'Advance discussions on pricing and contractual terms to avoid last-minute hurdles.' };
-
-                if (industrySpecificAdvice[selectedIndustry] && industrySpecificAdvice[selectedIndustry][answer.section]) {
-                    advice = industrySpecificAdvice[selectedIndustry][answer.section];
-                } else if (genericAdvice[answer.section]) {
-                    advice = genericAdvice[answer.section];
-                }
+                let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
                 recommendationHTML = `<div class="mt-3 pt-3 border-t border-red-200 dark:border-gray-700 bg-red-50 dark:bg-red-900/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-800 dark:text-red-200"><strong>Recommendation:</strong> ${advice}</p></div>`;
             }
             const sectionScore = `<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"><div class="flex justify-between items-start mb-2"><h4 class="font-medium">${answer.section}</h4><span class="font-bold ${scoreColor}">${answer.score}/9</span></div><p class="text-sm text-gray-600 dark:text-gray-400">${answer.answer}</p>${recommendationHTML}</div>`;
-            scoreBreakdown.insertAdjacentHTML('beforeend', sectionScore);
+            app.ui.scoreBreakdown.insertAdjacentHTML('beforeend', sectionScore);
         });
         
-        generateExecutiveSummary(userAnswers, percentage, selectedSalesStage);
-
+        generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
         feather.replace();
     }
 
     function generateExecutiveSummary(answers, overallScore, salesStage) {
         let weaknesses = [];
-        const metricsMotiveAnswer = answers.find(a => a.section === 'METRICS & MOTIVES');
+        const metricsMotiveAnswer = answers.find(a => a.section === 'PAIN & METRICS');
         const sortedAnswers = [...answers].sort((a, b) => a.score - b.score);
         
         if (metricsMotiveAnswer && metricsMotiveAnswer.score < 5) {
             weaknesses.push(metricsMotiveAnswer);
-            const nextWeakest = sortedAnswers.find(a => a.section !== 'METRICS & MOTIVES');
-            if (nextWeakest) weaknesses.push(nextWeakest);
-        } else {
-            weaknesses = sortedAnswers.slice(0, 2);
-        }
+            const nextWeakest = sortedAnswers.find(a => a.section !== 'PAIN & METRICS');
+            if (nextWeakest && weaknesses.length < 2) weaknesses.push(nextWeakest);
+        } else { weaknesses = sortedAnswers.slice(0, 2); }
         
         const strength = sortedAnswers[sortedAnswers.length - 1];
         let summaryHTML = '<ul class="space-y-3 text-gray-700 dark:text-gray-300">';
@@ -445,20 +405,19 @@ document.addEventListener('DOMContentLoaded', function() {
 
         weaknesses.forEach(weakness => {
             const snippet = summarySnippets[weakness.section] || 'This area needs to be addressed.';
-             summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-500">🔴</span><span><strong>Urgent Focus: ${weakness.section}</strong>. ${snippet}</span></li>`;
+            summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-500">🔴</span><span><strong>Urgent Focus: ${weakness.section}</strong>. ${snippet}</span></li>`;
         });
         summaryHTML += '</ul>';
 
         let strategicMessage = '';
-        if (overallScore <= 19) {
-            strategicMessage = salesStage === 'Evaluation / PoC' ? "Dangerous if considering an Eval/PoC with this low score." : "Okay as early stage, but more account mapping and discovery qualification is required.";
-        } else if (overallScore <= 39) {
-            if (salesStage === 'Early Stage') strategicMessage = "Good progress for  an early stage deal. Now attach the offer to a mutually agreed strategic business outcome.";
-            else if (salesStage === 'Evaluation / PoC') strategicMessage = "Be cautious. Be sure to confirm success metrics of PoC. Dig deeper on Why now? Why us?";
-            else strategicMessage = "Be cautious. A deal this underqualified should not be seen as ready to close.";
+        if (overallScore <= 19) strategicMessage = salesStage === 'Evaluation / PoC' ? "Dangerous if considering an Eval/PoC with this low score." : "Okay if early, but more qualification is required.";
+        else if (overallScore <= 39) {
+            if (salesStage === 'Early Stage') strategicMessage = "Good news for an early stage deal. Now attach the offer to a mutually agreed business outcome.";
+            else if (salesStage === 'Evaluation / PoC') strategicMessage = "Be cautious. The business case for this PoC is not strong enough. Why now? Why us?";
+            else strategicMessage = "Be worried. A deal this weak should not be in the closing stage.";
         } else if (overallScore <= 59) {
-            if (salesStage === 'Early Stage') strategicMessage = "Very good qualification for an early stage deal. A solid foundation to build upon.";
-            else if (salesStage === 'Evaluation / PoC') strategicMessage = "Looks solid. Now, what are the blockers? How clear are we and customer about timeline and budget.";
+            if (salesStage === 'Early Stage') strategicMessage = "Very good news for an early stage deal. A solid foundation to build upon.";
+            else if (salesStage === 'Evaluation / PoC') strategicMessage = "This looks good. Now, what are the blockers? Confirm timeline and budget.";
             else strategicMessage = "Look for blockers. Can the champion access the Economic Buyer? Is this a champion or a coach?";
         } else if (overallScore <= 79) {
             strategicMessage = salesStage === 'Evaluation / PoC' ? "Very strong for a PoC. Start preparing success metrics and crafting the proposal." : "Focus on differentiation and beware of the buyer ghosting as you move to close.";
@@ -466,15 +425,12 @@ document.addEventListener('DOMContentLoaded', function() {
             strategicMessage = "The finish line is in sight, but it's not over until it's signed. Verbally discuss pricing/contracts with champions/buyers and expect negotiations.";
         }
         
-        summaryHTML += `
-            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-                <p class="text-base font-medium text-purple-700 dark:text-purple-400">${strategicMessage}</p>
-            </div>
-        `;
-
-        executiveSummary.innerHTML = summaryHTML;
+        summaryHTML += `<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700"><p class="text-base font-medium text-purple-700 dark:text-purple-400">${strategicMessage}</p></div>`;
+        app.ui.executiveSummary.innerHTML = summaryHTML;
     }
 
+    // --- Mobile & Theme Handlers ---
+    app.buttons.mobileMenu.addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden'); app.buttons.mobileMenu.classList.toggle('open'); });
 });
 </script>