document.addEventListener('DOMContentLoaded', function () {
    // Select all review content elements inside each review slide.
    const reviewContents = document.querySelectorAll('.review-item .review-content');
    const wordLimit = 20;

    reviewContents.forEach(function(reviewContent, index) {
        // Use textContent to get all the text, then trim and normalize whitespace.
        let contentText = reviewContent.textContent || '';
        contentText = contentText.trim().replace(/\s+/g, ' ');
        
        // Log the processed text and word count for debugging.
        console.log(`Element ${index} processed text: "${contentText}"`);
        const words = contentText.split(' ');
        console.log(`Element ${index} word count: ${words.length}`);
        
        // Only proceed if the word count exceeds the wordLimit.
        if (words.length > wordLimit) {
            // Get the visible and extra parts.
            const visibleContent = words.slice(0, wordLimit).join(' ');
            const extraContent = words.slice(wordLimit).join(' ');
            
            // Replace the inner HTML with the truncated content and a hidden span.
            reviewContent.innerHTML = `<p>
                ${visibleContent}<span class="extra-content" style="display: none;"> ${extraContent}</span>
            </p>`;
            
            // Create the Read More button.
            const readMoreBtn = document.createElement('button');
            readMoreBtn.textContent = 'Read More';
            readMoreBtn.classList.add('read-more-btn');
            reviewContent.appendChild(readMoreBtn);
            
            // Toggle extra content visibility on click.
            readMoreBtn.addEventListener('click', function () {
                const extraSpan = reviewContent.querySelector('.extra-content');
                if (extraSpan.style.display === 'block') {
                    extraSpan.style.display = 'none';
                    readMoreBtn.textContent = 'Read More';
                } else {
                    extraSpan.style.display = 'block';
                    readMoreBtn.textContent = 'Read Less';
                }
            });
        }
    });
});