document.addEventListener("DOMContentLoaded", function() {

    // 1. CREATE AND INJECT ALL CSS STYLES
    // This creates a <style> tag and adds it to the document's head,
    // ensuring all styles are self-contained and don't conflict.
    (function() {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
            /* --- Animations --- */
            @keyframes upFadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* --- Main Container --- */
            #up-lead-gen-container {
                max-width: 650px;
                margin: 20px auto; /* Minimized whitespace around */
                background: #ffffff;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 24px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                text-align: center;
                overflow: hidden; /* Ensures rounded corners are clean */
            }

            /* --- Progress Bar --- */
            #up-progress-bar-container {
                width: 100%;
                background-color: #f0f0f0;
                border-radius: 25px;
                overflow: hidden;
                margin-bottom: 24px;
                -webkit-transform: translateZ(0); /* Fixes Safari rendering bug */
            }

            #up-progress-bar {
                height: 12px;
                width: 25%; /* Starts partially filled as requested */
                background-color: #6765E8; /* CTA Color */
                border-radius: 25px;
                transition: width 0.4s ease-in-out;
            }

            /* --- Quiz Steps --- */
            .up-quiz-step {
                display: none; /* Hide all steps by default */
                animation: upFadeIn 0.5s ease-out;
            }

            .up-quiz-step.active {
                display: block; /* Show only the active step */
            }

            /* --- Headings (H3 only) --- */
            #up-lead-gen-container h3 {
                font-size: 22px;
                color: #333;
                margin-top: 0;
                margin-bottom: 24px;
                font-weight: 600;
                line-height: 1.3;
            }

            /* --- Answer Buttons (CTA Color) --- */
            .up-answer-btn {
                display: block;
                width: 100%;
                background-color: #ffffff;
                color: #6765E8; /* CTA Color */
                border: 2px solid #6765E8; /* CTA Color */
                padding: 14px;
                margin-bottom: 12px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 600;
                text-align: center;
                transition: all 0.2s ease;
                -webkit-appearance: none; /* Fixes iOS styling */
            }

            .up-answer-btn:hover {
                background-color: #6765E8; /* CTA Color */
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(103, 101, 232, 0.2);
            }

            .up-answer-btn:last-child {
                margin-bottom: 0;
            }

            /* --- Final Step Text & CTA --- */
            .up-final-text {
                font-size: 17px;
                color: #555;
                line-height: 1.6;
                margin-bottom: 24px;
            }

            #up-final-cta {
                display: inline-block;
                background-color: #6765E8; /* CTA Color */
                color: #ffffff;
                border: none;
                padding: 14px 32px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 18px;
                font-weight: 700;
                text-decoration: none;
                transition: all 0.2s ease;
            }

            #up-final-cta:hover {
                background-color: #5250d4; /* Darker shade on hover */
                transform: translateY(-2px);
                box-shadow: 0 5px 10px rgba(103, 101, 232, 0.3);
            }
        `;
        document.head.appendChild(style);
    })();

    // 2. QUIZ INTERACTIVITY LOGIC

    // Select all relevant elements
    var answerButtons = document.querySelectorAll(".up-answer-btn");
    var quizSteps = document.querySelectorAll(".up-quiz-step");
    var progressBar = document.getElementById("up-progress-bar");
    var finalCtaButton = document.getElementById("up-final-cta");

    // Map step IDs to their progress bar width
    var progressMap = {
        "up-step-1": "25%",
        "up-step-2": "50%",
        "up-step-3": "75%",
        "up-step-4": "100%"
    };

    // Add click event to all answer buttons
    answerButtons.forEach(function(button) {
        button.addEventListener("click", function(e) {
            e.preventDefault(); // Prevent any default button behavior

            var nextStepId = this.getAttribute("data-next-step");
            var currentStep = this.closest(".up-quiz-step");

            if (currentStep) {
                currentStep.classList.remove("active");
            }

            var nextStep = document.getElementById(nextStepId);
            if (nextStep) {
                nextStep.classList.add("active");
            }

            // Update progress bar
            if (progressBar && progressMap[nextStepId]) {
                progressBar.style.width = progressMap[nextStepId];
            }
        });
    });

    // Add click event to the final CTA button
    if (finalCtaButton) {
        finalCtaButton.addEventListener("click", function(e) {
            e.preventDefault(); // Stop the link from opening normally
            // Open in the same window, as requested
            window.location.href = this.getAttribute("href");
        });
    }

});