document.addEventListener('DOMContentLoaded', function() {
    // Quiz functionality
    const quizContainer = document.getElementById('quiz-container');
    const quizData = [
        {
            question: "What's your wedding vibe?",
            options: [
                { text: "Classic & Elegant", icon: "feather", value: "classic" },
                { text: "Modern & Minimal", icon: "layers", value: "modern" },
                { text: "Rustic & Charming", icon: "tree", value: "rustic" },
                { text: "Boho & Free-spirited", icon: "compass", value: "boho" }
            ]
        },
        {
            question: "How many guests are you expecting?",
            options: [
                { text: "Intimate (Under 50)", icon: "users", value: "small" },
                { text: "Medium (50-150)", icon: "users", value: "medium" },
                { text: "Large (150+)", icon: "users", value: "large" }
            ]
        },
        {
            question: "Which services do you need?",
            options: [
                { text: "DJ Services", icon: "music", value: "dj" },
                { text: "Live Sound", icon: "mic", value: "sound" },
                { text: "Videography", icon: "video", value: "video" },
                { text: "Catering", icon: "coffee", value: "catering" },
                { text: "Media", icon: "film", value: "media" }
            ],
            multiSelect: true
        },
        {
            question: "What's your budget range?",
            options: [
                { text: "Budget Friendly", icon: "dollar-sign", value: "budget" },
                { text: "Mid Range", icon: "dollar-sign", value: "mid" },
                { text: "Premium Experience", icon: "dollar-sign", value: "premium" }
            ]
        }
    ];

    let currentStep = 0;
    let selectedOptions = {};
    
    function renderQuizStep(step) {
        const question = quizData[step];
        let optionsHTML = question.options.map(option => `
            <div class="quiz-option cursor-pointer p-4 rounded-lg mb-3 flex items-center transition-all" 
                 data-value="${option.value}" onclick="selectOption(this, ${step}, ${question.multiSelect || false})">
                <i data-feather="${option.icon}" class="mr-3"></i>
                <span>${option.text}</span>
            </div>
        `).join('');

        quizContainer.innerHTML = `
            <div class="quiz-question">
                <h3 class="text-2xl font-bold mb-6">${question.question}</h3>
                <div class="options-container">
                    ${optionsHTML}
                </div>
                <div class="flex justify-between mt-8">
                    ${step > 0 ? `<button onclick="prevStep()" class="btn-accent text-white py-2 px-6 rounded-full flex items-center">
                        <i data-feather="arrow-left" class="mr-2"></i> Back
                    </button>` : `<div></div>`}
                    <button onclick="nextStep()" class="bg-secondary hover:bg-secondary/90 text-primary font-bold py-2 px-6 rounded-full flex items-center ml-auto">
                        ${step < quizData.length - 1 ? 'Next' : 'See My Quote'} <i data-feather="arrow-right" class="ml-2"></i>
                    </button>
                </div>
            </div>
        `;
        feather.replace();
    }

    window.selectOption = function(element, step, isMultiSelect) {
        const value = element.getAttribute('data-value');
        const questionKey = `q${step}`;
        
        if (isMultiSelect) {
            if (!selectedOptions[questionKey]) selectedOptions[questionKey] = [];
            const index = selectedOptions[questionKey].indexOf(value);
            
            if (index === -1) {
                selectedOptions[questionKey].push(value);
                element.classList.add('selected');
            } else {
                selectedOptions[questionKey].splice(index, 1);
                element.classList.remove('selected');
            }
        } else {
            // Remove selected class from all options in this question
            document.querySelectorAll(`.quiz-option[data-value]`).forEach(opt => {
                opt.classList.remove('selected');
            });
            
            selectedOptions[questionKey] = value;
            element.classList.add('selected');
        }
    };

    window.nextStep = function() {
        const questionKey = `q${currentStep}`;
        if (!selectedOptions[questionKey] || 
            (quizData[currentStep].multiSelect && selectedOptions[questionKey].length === 0)) {
            alert("Please select an option to continue");
            return;
        }
        
        if (currentStep < quizData.length - 1) {
            currentStep++;
            renderQuizStep(currentStep);
        } else {
            // Show results
            showQuote();
        }
    };

    window.prevStep = function() {
        if (currentStep > 0) {
            currentStep--;
            renderQuizStep(currentStep);
        }
    };

    function showQuote() {
        // Calculate quote based on selections
        let basePrice = 1500;
        let services = [];
        
        if (selectedOptions.q2) {
            if (selectedOptions.q2.includes('dj')) basePrice += 800;
            if (selectedOptions.q2.includes('sound')) basePrice += 600;
            if (selectedOptions.q2.includes('video')) basePrice += 1200;
            if (selectedOptions.q2.includes('catering')) basePrice += 2000;
            if (selectedOptions.q2.includes('media')) basePrice += 500;
        }
        
        // Adjust for guest count
        if (selectedOptions.q1 === 'medium') basePrice *= 1.2;
        if (selectedOptions.q1 === 'large') basePrice *= 1.5;
        
        // Adjust for budget
        if (selectedOptions.q3 === 'budget') basePrice *= 0.8;
        if (selectedOptions.q3 === 'premium') basePrice *= 1.3;
        
        quizContainer.innerHTML = `
            <div class="text-center py-8">
                <div class="bg-accent/10 p-6 rounded-xl mb-8">
                    <i data-feather="check-circle" class="w-16 h-16 text-secondary mx-auto mb-4"></i>
                    <h3 class="text-2xl font-bold mb-2">Your Custom Quote</h3>
                    <p class="text-lg mb-6">Here's what we recommend for your perfect day:</p>
                    <div class="text-4xl font-bold text-secondary">$${Math.round(basePrice)}</div>
                    <p class="text-sm opacity-70 mt-2">Starting price (exact quote after consultation)</p>
                </div>
                
                <p class="mb-8">Like what you see? Let's make it official!</p>
                <button class="bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105">
                    Book Your Consultation
                </button>
            </div>
        `;
        feather.replace();
    }

    // Initialize quiz
    renderQuizStep(0);
});