document.addEventListener('DOMContentLoaded', () => {
    // Initialize assessment cards
    const assessmentCards = document.querySelectorAll('custom-assessment-card');
    
    assessmentCards.forEach(card => {
        card.addEventListener('click', () => {
            const dimension = card.getAttribute('dimension');
            localStorage.setItem('currentDimension', dimension);
            window.location.href = `assessment.html?dimension=${encodeURIComponent(dimension)}`;
        });
    });

    // Add hover effects to cards
    assessmentCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.shadowRoot.querySelector('.card-container').classList.add('shadow-lg');
            card.shadowRoot.querySelector('.card-container').classList.remove('shadow-md');
        });
        
        card.addEventListener('mouseleave', () => {
            card.shadowRoot.querySelector('.card-container').classList.remove('shadow-lg');
            card.shadowRoot.querySelector('.card-container').classList.add('shadow-md');
        });
    });

    // Assessment page logic
    if (window.location.pathname.includes('assessment.html')) {
        const params = new URLSearchParams(window.location.search);
        const dimension = params.get('dimension') || localStorage.getItem('currentDimension');
        
        // Update page title and description
        document.getElementById('dimension-title').textContent = dimension;
        document.getElementById('dimension-description').textContent = 
            `Evaluate your ${dimension.toLowerCase()} capabilities`;

        // Load questions (mock data for now)
        const questions = [
            {
                question: "How would you describe your organization's digital strategy?",
                description: "Consider alignment with business goals and digital transformation initiatives",
                options: [
                    { value: 1, label: "No formal digital strategy" },
                    { value: 2, label: "Emerging digital strategy" },
                    { value: 3, label: "Defined digital strategy" },
                    { value: 4, label: "Mature digital strategy" },
                    { value: 5, label: "Optimized digital strategy" }
                ]
            },
            {
                question: "How effectively is digital leadership demonstrated?",
                options: [
                    { value: 1, label: "No digital leadership" },
                    { value: 2, label: "Emerging digital leadership" },
                    { value: 3, label: "Some digital leadership" },
                    { value: 4, label: "Strong digital leadership" },
                    { value: 5, label: "Exceptional digital leadership" }
                ]
            }
        ];

        const container = document.getElementById('questions-container');
        questions.forEach((q, index) => {
            const card = document.createElement('custom-question-card');
            card.setAttribute('question', q.question);
            if (q.description) card.setAttribute('description', q.description);
            card.setAttribute('options', JSON.stringify(q.options));
            card.setAttribute('data-index', index);
            container.appendChild(card);
        });

        // Navigation buttons
        document.getElementById('next-btn').addEventListener('click', () => {
            // Validate all questions answered
            const unanswered = [...document.querySelectorAll('custom-question-card')]
                .filter(card => !card.getAttribute('selected'));
            
            if (unanswered.length > 0) {
                alert('Please answer all questions before proceeding');
                return;
            }
            
            // TODO: Save answers and navigate
            window.location.href = 'results.html';
        });

        document.getElementById('prev-btn').addEventListener('click', () => {
            window.location.href = 'index.html';
        });
    }
});