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

    // --- Interactive Values Section Logic ---
    const valuesData = [
        { title: "Beauty", description: "We treat all stake holders with politeness, dignity and civility that equals the outward beauty of our environment and the environments we create." },
        { title: "Innovation", description: "We challenge the status quo. We seek better, smarter and more beautiful ways to solve problems and deliver value. When ideas fall short, we learn, adapt and try again- never settling, always solving." },
        { title: "Loyalty", description: "We are faithful to our mission and vision and that of our stakeholders and the organizations they represent." },
        { title: "Diligence", description: "We give our utmost attention to all our projects. We do this in earnest and with precision." },
        { title: "Excellence", description: "We are committed to delivering exceptional results in every area of our operations." },
        { title: "Resilience", description: "In the face of daunting challenges, setbacks and failures; we learn and document lessons, bounce back and persist in the pursuit of goals, targets, objectives and deadlines. We do this with focused optimism." },
        { title: "Studiousness", description: "We are committed to learning and advancing our services, products, and tools to best serve our stakeholders." }
    ];

    const valuesListContainer = document.getElementById('values-list');
    const valuesContentContainer = document.getElementById('values-content');
    const valuesSection = document.getElementById('values-section');

    if (valuesListContainer && valuesContentContainer && valuesSection) {
        
        // Populate the list and content blocks
        valuesListContainer.innerHTML = valuesData.map((value, index) => `
            <li class="value-item ${index === 0 ? 'active' : ''}" data-index="${index}">
                ${value.title}
            </li>
        `).join('');

        valuesContentContainer.innerHTML = valuesData.map((value, index) => `
            <div class="value-content-block ${index === 0 ? 'active' : ''}" data-index="${index}">
                <!-- Background Number -->
                <div class="absolute -top-4 -left-4 text-8xl md:text-9xl font-extrabold text-neutral-100 -z-10">0${index + 1}</div>
                <!-- Title for mobile view -->
                <h3 class="text-3xl font-bold text-kh3-red mb-4 md:hidden">${value.title}</h3>
                <!-- Description -->
                <p class="text-lg md:text-xl text-neutral-600 leading-relaxed">${value.description}</p>
            </div>
        `).join('');

        const valueItems = valuesListContainer.querySelectorAll('.value-item');
        const contentBlocks = valuesContentContainer.querySelectorAll('.value-content-block');

        // Function to update the active state
        const updateActiveValue = (index) => {
            valueItems.forEach(item => item.classList.remove('active'));
            contentBlocks.forEach(block => block.classList.remove('active'));

            valuesListContainer.querySelector(`.value-item[data-index='${index}']`).classList.add('active');
            valuesContentContainer.querySelector(`.value-content-block[data-index='${index}']`).classList.add('active');
        };

        // Add hover event listeners for desktop
        valueItems.forEach((item, index) => {
            item.addEventListener('mouseenter', () => {
                // Only trigger on hover if not a touch device (basic check)
                if (window.matchMedia('(hover: hover)').matches) {
                    updateActiveValue(index);
                }
            });
        });
    }
});