Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Oct 4, 2025

Commit

5a1f963

verified ·

1 Parent(s): a7ddc91

Manual changes saved

Browse files

Files changed (1) hide show

scorecard.html +383 -517

scorecard.html CHANGED Viewed

@@ -6,12 +6,13 @@
     <title>Sales Qualification Tool</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
         .question-screen {
             min-height: 100vh;
             transition: all 0.3s ease;
@@ -32,569 +33,434 @@
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 0.75rem center;
             background-size: 1.25rem;
         }
     </style>
 </head>
-<body class="bg-[#3D1862] dark:bg-[#3D1862] text-blue-900 dark:text-blue-900 min-h-screen flex flex-col relative">
-<header class="sticky top-0 z-50 bg-purple-900/90 dark:bg-purple-900/90 backdrop-blur-md shadow-sm">
-<div class="container mx-auto px-4 py-3">
-            <div class="flex justify-between items-center">
-                <a href="index.html" class="flex items-center space-x-2">
                 <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
-                <span class="text-xl font-bold text-white font-heading">McGPT</span>
-</a>
-                <nav class="hidden md:flex space-x-8">
-                    <a href="index.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Home</a>
-                    <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
-                    <a href="scorecard.html" class="nav-link active py-2 px-1 text-white">Scorecard</a>
-                    <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Method</a>
-</nav>
-                <div class="flex items-center space-x-4">
-                    <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
-                        <i data-feather="moon" class="hidden dark:block"></i>
-                        <i data-feather="sun" class="block dark:hidden"></i>
-                    </button>
-                    <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 bg-[#9B5CEB] rounded-lg">
-                        <span class="hamburger-line"></span>
-                        <span class="hamburger-line"></span>
-                        <span class="hamburger-line"></span>
-                    </button>
-</div>
             </div>
-            <div id="mobileMenu" class="hidden md:hidden py-4 border-t mt-3">
-                <div class="flex flex-col space-y-3">
-                    <a href="index.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Home</a>
-                    <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
-                    <a href="scorecard.html" class="nav-link active py-2 px-1 text-white">Scorecard</a>
-                    <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Method</a>
-                </div>
             </div>
         </div>
-    </header>
-<div id="app" class="relative overflow-hidden">
-        <!-- Industry Selection Screen -->
-        <div id="industry-screen" class="question-screen flex flex-col p-6 bg-gradient-to-b from-[#8B5CF6] to-[#A78BFA] text-white">
-<div class="flex-1 max-w-2xl mx-auto w-full">
-                <div class="text-center mb-8">
-                <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
-<img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-18 h-12">
-</div>
-<h1 class="text-3xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
-<p class="text-white font-light">Select the customer's industry to begin qualification</p>
-</div>
-                <div class="mb-6">
-<div class="relative">
-<select id="industry" class="w-full p-4 bg-white/20 border-2 border-[#F1EEFC] rounded-xl text-black focus:ring-2 focus:ring-white focus:border-white transition-all">
-<option value="" disabled selected>Select an industry</option>
-                            <option value="FSI">FSI (Financial Services)</option>
-                            <option value="Healthcare">Healthcare</option>
-                            <option value="Public Sector & Education">Public Sector & Education</option>
-                            <option value="Retail and Ecommerce">Retail and Ecommerce</option>
-                            <option value="Tech (SaaS)">Tech (SaaS)</option>
-                            <option value="Cyber">Cyber</option>
-                            <option value="Media and Entertainment">Media and Entertainment</option>
-                            <option value="Manufacturing">Manufacturing</option>
-                            <option value="Energy">Energy</option>
-                            <option value="Logistics">Logistics</option>
-                            <option value="Transport">Transport</option>
-                            <option value="Startups">Startups</option>
-                        </select>
-                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                            <i data-feather="chevron-down" class="text-blue-300"></i>
-                        </div>
-                    </div>
-                </div>
-                <div id="industry-description" class="bg-[#6A27C0] p-4 rounded-lg mb-4 hidden">
-                    <p class="text-blue-100 text-sm"></p>
                 </div>
-                <button id="start-btn" disabled class="w-full py-4 bg-white text-[#792DD4] font-semibold rounded-xl shadow-lg hover:bg-gray-100 hover:scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none mb-4 flex items-center justify-center space-x-2">
-                    <span>Start Qualification</span>
-                    <i data-feather="arrow-right" class="w-5 h-5"></i>
-                </button>
             </div>
         </div>
-        <!-- Question Screens (initially hidden) -->
-        <div id="question-screens" class="hidden">
-            <!-- Progress Bar -->
-            <div class="fixed top-0 left-0 right-0 z-10">
-                <div class="h-1.5 bg-white/20">
-                    <div id="progress-bar" class="progress-bar bg-white h-full rounded-r-full" style="width: 0%"></div>
                 </div>
             </div>
-            <!-- Questions will be dynamically inserted here -->
-        </div>
-        <!-- Results Screen (initially hidden) -->
-        <div id="results-screen" class="question-screen p-6 bg-gray-50 hidden">
-            <div class="flex-1">
-                <div class="text-center mb-8">
-                    <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <span id="score-percentage" class="text-3xl font-bold text-blue-600">0%</span>
                     </div>
-                    <h2 class="text-2xl font-bold mb-2">Qualification Complete</h2>
-                    <p id="score-message" class="text-gray-600"></p>
-                </div>
-                <div class="mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="w-8 h-8 bg-[#792DD4] rounded-lg flex items-center justify-center mr-3">
-                            <i data-feather="info" class="text-white w-4 h-4"></i>
                         </div>
-                        <h3 class="text-xl font-bold">Industry Insights</h3>
                     </div>
-                    <div id="industry-insights" class="bg-white/90 p-5 rounded-xl shadow-md border border-white backdrop-blur-sm text-gray-800"></div>
                 </div>
-                <div class="mb-8">
                     <div class="flex items-center mb-4">
-                        <div class="w-8 h-8 bg-[#792DD4] rounded-lg flex items-center justify-center mr-3">
-                            <i data-feather="bar-chart-2" class="text-white w-4 h-4"></i>
-                        </div>
                         <h3 class="text-xl font-bold">Score Breakdown</h3>
                     </div>
                     <div id="score-breakdown" class="space-y-4"></div>
                 </div>
-                <div class="mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="w-8 h-8 bg-[#792DD4] rounded-lg flex items-center justify-center mr-3">
-                            <i data-feather="alert-triangle" class="text-white w-4 h-4"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Warnings & Recommendations</h3>
-                    </div>
-                    <div id="warnings" class="space-y-4"></div>
-                </div>
             </div>
-            <div class="space-y-3">
-                    <button id="restart-quiz" onclick="location.href='index.html'" class="w-full py-4 bg-gradient-to-r from-[#9B5CEB] to-[#8B5CF6] text-[#C43BFF] font-semibold rounded-xl shadow-lg hover:from-[#8B5CF6] hover:to-[#7B4BEB] transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2">
-<i data-feather="home" class="w-5 h-5"></i>
-                    <span>Return to Home</span>
                 </button>
             </div>
         </div>
     </div>
-    <script>
-        // 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';
-        });
-        // Set initial theme - always dark by default
         html.classList.add('dark');
-        localStorage.theme = 'dark';
-        // Set active nav link
-        const currentPage = window.location.pathname.split('/').pop() || 'index.html';
-        document.querySelectorAll('.nav-link').forEach(link => {
-            const linkHref = link.getAttribute('href');
-            if ((currentPage === 'index.html' && linkHref === 'index.html') ||
-                (currentPage !== 'index.html' && linkHref === currentPage)) {
-                link.classList.add('active');
-            } else {
-                link.classList.remove('active');
-            }
-        });
-        // Feather Icons
-        feather.replace();
-        document.addEventListener('DOMContentLoaded', function() {
-feather.replace();
-            AOS.init();
-            // Question data
-            const questions = [
-                {
-                    section: "IDENTIFIED PAIN",
-                    question: "Is our deal attached to addressing customers 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?",
-                    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 customer prefer us to 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 with 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 }
-                    ]
-                }
-            ];
-            // Industry insights
-            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."
-            };
-            // DOM elements
-            const industryScreen = document.getElementById('industry-screen');
-            const industrySelect = document.getElementById('industry');
-            const industryDescription = document.getElementById('industry-description');
-            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 warningsDiv = document.getElementById('warnings');
-            const emailReportBtn = document.getElementById('email-report');
-            const restartQuizBtn = document.getElementById('restart-quiz');
-            // App state
-            let currentQuestion = 0;
-            let selectedIndustry = '';
-            let answers = [];
-            let totalScore = 0;
-            const maxPossibleScore = questions.length * 9;
-            // Event listeners
-            industrySelect.addEventListener('change', function() {
-                selectedIndustry = this.value;
-                const description = industryInsights[selectedIndustry];
-                if (description) {
-                    industryDescription.querySelector('p').textContent = description;
-                    industryDescription.classList.remove('hidden');
-                    startBtn.disabled = false;
-                } else {
-                    industryDescription.classList.add('hidden');
-                    startBtn.disabled = true;
-                }
-            });
-            startBtn.addEventListener('click', function() {
-                industryScreen.classList.add('hidden');
-                questionScreens.classList.remove('hidden');
-                renderQuestion(currentQuestion);
-            });
-            emailReportBtn.addEventListener('click', function() {
-                this.innerHTML = '<i data-feather="check" class="mr-2"></i> Report Sent!';
-                feather.replace();
-                setTimeout(() => {
-                    this.innerHTML = '<i data-feather="mail" class="mr-2"></i> Email Report';
-                    feather.replace();
-                }, 2000);
             });
-            function resetQuiz() {
-                currentQuestion = 0;
-                selectedIndustry = '';
-                answers = [];
-                totalScore = 0;
-                industryScreen.classList.remove('hidden');
-                questionScreens.classList.add('hidden');
-                resultsScreen.classList.add('hidden');
-                industrySelect.value = '';
-                industryDescription.classList.add('hidden');
-                startBtn.disabled = true;
-            }
-            restartQuizBtn.addEventListener('click', resetQuiz);
-// Render question
-            function renderQuestion(index) {
-                if (index >= questions.length) {
-                    showResults();
-                    return;
-                }
-                const question = questions[index];
-                const progress = ((index) / questions.length) * 100;
-                progressBar.style.width = `${progress}%`;
-                // Create question screen
-                const questionScreen = document.createElement('div');
-                questionScreen.className = `question-screen flex flex-col p-6 bg-white/90 backdrop-blur-sm fade-in`;
-                questionScreen.id = `question-${index}`;
-                questionScreen.innerHTML = `
-                    <div class="flex-1">
-                        <div class="mb-4">
-                            <span class="text-sm font-medium text-blue-600">${question.section}</span>
-                            <h2 class="text-xl font-bold mt-1 mb-2">${question.question}</h2>
-                        </div>
-                        <div class="mb-4">
-                            <label for="answer-${index}" class="block text-sm font-medium text-gray-700 mb-2">Select answer</label>
-                            <div class="relative">
-                                <select id="answer-${index}" class="w-full p-3 bg-white/90 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#9B5CEB] focus:border-[#9B5CEB]">
-                                    <option value="" disabled selected>Select an answer</option>
-                                    ${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}
-                                </select>
-                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                                    <i data-feather="chevron-down"></i>
-                                </div>
-                            </div>
-                        </div>
-<button id="next-btn-${index}" disabled class="w-full py-3 bg-[#9B5CEB] text-white font-semibold rounded-lg shadow-md hover:bg-[#8B5CF6] transition disabled:opacity-50 disabled:cursor-not-allowed mb-4">
-${index === questions.length - 1 ? 'Finish' : 'Next'}
-                        </button>
                     </div>
-                `;
-                // Clear previous question and add new one
-                questionScreens.innerHTML = '';
-                questionScreens.appendChild(questionScreen);
-                feather.replace();
-                // Set up event listeners for new question
-                const answerSelect = document.getElementById(`answer-${index}`);
-                const nextBtn = document.getElementById(`next-btn-${index}`);
-                answerSelect.addEventListener('change', function() {
-                    nextBtn.disabled = !this.value;
-                });
-                nextBtn.addEventListener('click', function() {
-                    const score = parseInt(answerSelect.value);
-                    answers.push({
-                        question: question.question,
-                        answer: answerSelect.options[answerSelect.selectedIndex].text,
-                        score: score,
-                        section: question.section
-                    });
-                    totalScore += score;
-                    currentQuestion++;
-                    renderQuestion(currentQuestion);
-                });
-            }
-            // Show results
-            function showResults() {
-                questionScreens.classList.add('hidden');
-                resultsScreen.classList.remove('hidden');
-                // Calculate percentage (normalize to 0-100 scale)
-                const normalizedScore = Math.max(0, totalScore + (questions.length * 3)); // Adjust for negative scores
-                const percentage = Math.round((normalizedScore / (maxPossibleScore + (questions.length * 3))) * 100);
-                scorePercentage.textContent = `${percentage}%`;
-                // Set score message
-                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. Consider whether to continue pursuing this opportunity.";
-                }
-                // Set industry insights
-                industryInsightsDiv.textContent = industryInsights[selectedIndustry];
-                // Create score breakdown
-                scoreBreakdown.innerHTML = '';
-                answers.forEach((answer, index) => {
-                    const sectionScore = document.createElement('div');
-                    sectionScore.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-200';
-                    const scoreRatio = answer.score / 9;
-                    let scoreColor;
-                    if (scoreRatio >= 0.8) scoreColor = 'text-green-600';
-                    else if (scoreRatio >= 0.5) scoreColor = 'text-yellow-600';
-                    else scoreColor = 'text-red-600';
-                    sectionScore.innerHTML = `
-                        <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 mb-2">${answer.answer}</p>
-                    `;
-                    scoreBreakdown.appendChild(sectionScore);
-                });
-                // Create warnings
-                warningsDiv.innerHTML = '';
-                const lowScores = answers.filter(a => a.score < 5);
-                // Add more industry-specific recommendations as needed
-                if (lowScores.length === 0) {
-                    warningsDiv.innerHTML = `
-                        <div class="bg-green-50 p-4 rounded-lg border border-green-200 text-green-800">
-                            <p>No critical weaknesses identified. All areas scored well.</p>
-                        </div>
-                    `;
-                } else {
-                    lowScores.forEach(score => {
-                        const warning = document.createElement('div');
-                        warning.className = 'bg-red-50 p-4 rounded-lg border border-red-200 text-red-800';
-                        let advice = '';
-                        if (score.section === "IDENTIFIED PAIN") {
-                            advice = "Work with the customer to better define their business pain and how your solution addresses it.";
-                        } else if (score.section === "CHAMPIONS") {
-                            advice = "Identify and engage with champions who can influence the economic buyer.";
-                        } else if (score.section === "GO LIVE PLAN") {
-                            advice = "Develop a clear implementation plan with agreed timelines and milestones.";
-                        } else if (score.section === "METRICS & MOTIVES") {
-                            advice = "Establish clear metrics for success that are agreed by all stakeholders.";
-                        } else if (score.section === "DECISION CRITERIA") {
-                            advice = "Ensure your solution meets the customer's decision criteria or work to influence those criteria.";
-                        } else if (score.section === "DECISION PROCESS") {
-                            advice = "Identify and document the compelling reason for the customer to act now.";
-                        } else if (score.section === "COMPETITION") {
-                            advice = "Differentiate your solution and establish why you're the preferred choice.";
-                        } else if (score.section === "BLOCKERS?") {
-                            advice = "Identify and address any potential blockers to the deal progressing.";
-                        } else if (score.section === "ECONOMIC BUYER") {
-                            advice = "Confirm budget availability and secure commitment from the economic buyer.";
-                        } else if (score.section === "PAPER PROCESS") {
-                            advice = "Advance discussions on pricing and contractual terms to avoid last-minute hurdles.";
-                        }
-                        warning.innerHTML = `
-                            <h4 class="font-semibold mb-1">${score.section}</h4>
-                            <p class="text-sm mb-2">${score.question}</p>
-                            <p class="text-sm font-medium">Recommendation: ${advice}</p>
-                        `;
-                        warningsDiv.appendChild(warning);
-                    });
                 }
-            }
-        });
-    </script>
-    </script>
 </body>
-</html>

     <title>Sales Qualification Tool</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
+        body { font-family: 'Poppins', sans-serif; }
         .question-screen {
             min-height: 100vh;
             transition: all 0.3s ease;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 0.75rem center;
             background-size: 1.25rem;
         }
+        .dark select {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        }
+        .hamburger-line {
+             width: 20px; height: 2px; background-color: white; display: block; transition: all 0.3s;
+        }
+        .open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
+        .open .hamburger-line:nth-child(2) { opacity: 0; }
+        .open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
+        .nav-link.active {
+            font-weight: 600;
+            border-bottom: 2px solid #9B5CEB;
+        }
     </style>
 </head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative">
+<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
+    <div class="container mx-auto px-4 py-3">
+        <div class="flex justify-between items-center">
+            <a href="index.html" class="flex items-center space-x-2">
                 <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
+                <span class="text-xl font-bold text-gray-800 dark:text-white font-heading">McGPT</span>
+            </a>
+            <nav class="hidden md:flex space-x-8">
+                <a href="index.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Home</a>
+                <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Mapper</a>
+                <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-600 dark:text-gray-300">Scorecard</a>
+                <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Method</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i data-feather="moon" class="hidden dark:block"></i>
+                    <i data-feather="sun" class="block dark:hidden"></i>
+                </button>
+                <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 bg-purple-600 rounded-lg">
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                </button>
             </div>
+        </div>
+        <div id="mobileMenu" class="hidden md:hidden py-4 border-t border-gray-200 dark:border-gray-700 mt-3">
+            <div class="flex flex-col space-y-3">
+                <a href="index.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Home</a>
+                <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Mapper</a>
+                <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-600 dark:text-gray-300">Scorecard</a>
+                <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Method</a>
             </div>
         </div>
+    </div>
+</header>
+<div id="app" class="relative overflow-hidden flex-1">
+    <div id="industry-screen" class="question-screen flex items-center justify-center p-6 bg-gradient-to-br from-purple-600 to-indigo-700 text-white">
+        <div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
+            <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-18 h-12">
+            </div>
+            <h1 class="text-4xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
+            <p class="text-purple-200 font-light text-lg">Select the customer's industry to begin qualification</p>
+            <div class="mt-8 mb-6">
+                <div class="relative">
+                    <select id="industry" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white placeholder-purple-200 focus:ring-2 focus:ring-white focus:outline-none transition-all appearance-none">
+                        <option value="" disabled selected>Select an industry</option>
+                        <option value="FSI">FSI (Financial Services)</option>
+                        <option value="Healthcare">Healthcare</option>
+                        <option value="Public Sector & Education">Public Sector & Education</option>
+                        <option value="Retail and Ecommerce">Retail and Ecommerce</option>
+                        <option value="Tech (SaaS)">Tech (SaaS)</option>
+                        <option value="Cyber">Cyber</option>
+                        <option value="Media and Entertainment">Media and Entertainment</option>
+                        <option value="Manufacturing">Manufacturing</option>
+                        <option value="Energy">Energy</option>
+                        <option value="Logistics">Logistics</option>
+                        <option value="Transport">Transport</option>
+                        <option value="Startups">Startups</option>
+                    </select>
                 </div>
+            </div>
+            <div id="industry-description" class="bg-purple-800/50 p-4 rounded-lg mb-4 hidden min-h-[60px]">
+                <p class="text-purple-100 text-sm"></p>
+            </div>
+            <button id="start-btn" disabled class="w-full py-4 bg-white text-purple-700 font-semibold rounded-xl shadow-lg hover:bg-gray-100 transform hover:scale-102 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none mb-4 flex items-center justify-center space-x-2">
+                <span>Start Qualification</span>
+                <i data-feather="arrow-right" class="w-5 h-5"></i>
+            </button>
+        </div>
+    </div>
+    <div id="question-screens" class="hidden">
+        <div class="fixed top-0 left-0 right-0 z-10 bg-gray-100 dark:bg-gray-900 pt-16">
+            <div class="h-1.5 bg-gray-200 dark:bg-gray-700">
+                <div id="progress-bar" class="progress-bar bg-purple-600 h-full rounded-r-full"></div>
             </div>
         </div>
+        </div>
+    <div id="results-screen" class="question-screen p-6 bg-gray-100 dark:bg-gray-900 hidden overflow-y-auto">
+        <div class="max-w-4xl mx-auto w-full" data-aos="fade-in">
+            <div class="text-center mb-8">
+                <div class="w-24 h-24 bg-white dark:bg-gray-800 border-4 border-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <span id="score-percentage" class="text-3xl font-bold text-purple-600 dark:text-purple-400">0%</span>
                 </div>
+                <h2 class="text-2xl font-bold mb-2">Qualification Complete</h2>
+                <p id="score-message" class="text-gray-600 dark:text-gray-400"></p>
             </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="space-y-6">
+                    <div>
+                        <div class="flex items-center mb-4">
+                            <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="info" class="text-white w-4 h-4"></i></div>
+                            <h3 class="text-xl font-bold">Industry Insights</h3>
+                        </div>
+                        <div id="industry-insights" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md text-gray-800 dark:text-gray-200"></div>
                     </div>
+                    <div>
+                        <div class="flex items-center mb-4">
+                            <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="alert-triangle" class="text-white w-4 h-4"></i></div>
+                            <h3 class="text-xl font-bold">Warnings & Recommendations</h3>
                         </div>
+                        <div id="warnings" class="space-y-4"></div>
                     </div>
                 </div>
+                <div>
                     <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="bar-chart-2" class="text-white w-4 h-4"></i></div>
                         <h3 class="text-xl font-bold">Score Breakdown</h3>
                     </div>
                     <div id="score-breakdown" class="space-y-4"></div>
                 </div>
             </div>
+            <div class="mt-8">
+                <button id="restart-quiz" class="w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2">
+                    <i data-feather="refresh-cw" class="w-5 h-5"></i>
+                    <span>Start New Scorecard</span>
                 </button>
             </div>
         </div>
     </div>
+</div>
+<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(); // Re-render icons for color change
+    });
+    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 } ] }
+    ];
+    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.'
+    };
+    // NEW: Industry-specific advice object
+    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.'
+        }
+    };
+    // DOM elements
+    const industryScreen = document.getElementById('industry-screen');
+    const industrySelect = document.getElementById('industry');
+    const industryDescription = document.getElementById('industry-description');
+    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 warningsDiv = document.getElementById('warnings');
+    const restartQuizBtn = document.getElementById('restart-quiz');
+    // App state
+    let currentQuestion = 0;
+    let selectedIndustry = '';
+    let userAnswers = [];
+    const maxPossibleScore = questions.length * 9;
+    // --- EVENT LISTENERS ---
+    industrySelect.addEventListener('change', function() {
+        selectedIndustry = this.value;
+        const description = industryInsights[selectedIndustry];
+        if (description) {
+            industryDescription.querySelector('p').textContent = description;
+            industryDescription.classList.remove('hidden');
+            startBtn.disabled = false;
+        } else {
+            industryDescription.classList.add('hidden');
+            startBtn.disabled = true;
+        }
+    });
+    startBtn.addEventListener('click', function() {
+        industryScreen.classList.add('hidden');
+        questionScreens.classList.remove('hidden');
+        renderQuestion(currentQuestion);
+    });
+    restartQuizBtn.addEventListener('click', resetQuiz);
+    // --- CORE FUNCTIONS ---
+    function resetQuiz() {
+        currentQuestion = 0;
+        selectedIndustry = '';
+        userAnswers = [];
+        industrySelect.value = "";
+        industryDescription.classList.add('hidden');
+        startBtn.disabled = true;
+        resultsScreen.classList.add('hidden');
+        industryScreen.classList.remove('hidden');
+        AOS.refresh();
+    }
+    function renderQuestion(index) {
+        if (index >= questions.length) {
+            showResults();
+            return;
+        }
+        const question = questions[index];
+        const progress = ((index) / questions.length) * 100;
+        progressBar.style.width = `${progress}%`;
+        const questionScreen = document.createElement('div');
+        questionScreen.className = `question-screen flex flex-col justify-center p-6 bg-gray-100 dark:bg-gray-900 fade-in`;
+        questionScreen.id = `question-${index}`;
+        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>
+                    <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>
+                <button id="next-btn-${index}" disabled class="w-full 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>
+        `;
+        questionScreens.innerHTML = '';
+        questionScreens.appendChild(questionScreen);
+        feather.replace();
+        const answerSelect = document.getElementById(`answer-${index}`);
+        const nextBtn = document.getElementById(`next-btn-${index}`);
+        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);
+        });
+    }
+    function showResults() {
+        questionScreens.classList.add('hidden');
+        resultsScreen.classList.remove('hidden');
+        AOS.refresh();
+        const totalScore = userAnswers.reduce((sum, ans) => sum + ans.score, 0);
+        const normalizedScore = Math.max(0, totalScore + (questions.length * 5)); // Adjust for negative scores. 5 is max negative.
+        const maxNormalizedScore = maxPossibleScore + (questions.length * 5);
+        const percentage = Math.round((normalizedScore / maxNormalizedScore) * 100);
+        scorePercentage.textContent = `${percentage}%`;
+        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.';
+        industryInsightsDiv.innerHTML = `<p>${industryInsights[selectedIndustry]}</p>`;
+        scoreBreakdown.innerHTML = '';
+        userAnswers.forEach(answer => {
+            const scoreRatio = (answer.score + 5) / 14; // Normalize score from -5-9 to 0-1 range
+            let scoreColor = 'text-red-600 dark:text-red-400';
+            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';
+            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>
+                </div>`;
+            scoreBreakdown.insertAdjacentHTML('beforeend', sectionScore);
+        });
+        warningsDiv.innerHTML = '';
+        const lowScores = userAnswers.filter(a => a.score < 5);
+        if (lowScores.length === 0) {
+            warningsDiv.innerHTML = `<div class="bg-green-100 dark:bg-green-900 p-4 rounded-lg text-green-800 dark:text-green-200"><p>No critical weaknesses identified. Great work!</p></div>`;
+        } else {
+            lowScores.forEach(score => {
+                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][score.section]) {
+                    advice = industrySpecificAdvice[selectedIndustry][score.section];
+                } else if (genericAdvice[score.section]) {
+                    advice = genericAdvice[score.section];
                 }
+                const warning = `
+                    <div class="bg-red-100 dark:bg-red-900/50 p-4 rounded-lg text-red-800 dark:text-red-200">
+                        <h4 class="font-semibold mb-1">${score.section}</h4>
+                        <p class="text-sm mb-2 opacity-80">Your current selection: "${score.answer}"</p>
+                        <p class="text-sm font-medium"><strong>Recommendation:</strong> ${advice}</p>
+                    </div>`;
+                warningsDiv.insertAdjacentHTML('beforeend', warning);
+            });
+        }
+    }
+});
+</script>
 </body>
+</html>