document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.pecs-card');
    const synth = window.speechSynthesis;

    cards.forEach(card => {
        card.addEventListener('click', () => {
            // Remove active state from all other cards
            cards.forEach(c => c.classList.remove('active'));
            // Add active state to clicked card
            card.classList.add('active');

            const textToSpeak = card.querySelector('.card-title').textContent;
            if (textToSpeak && synth) {
                const utterance = new SpeechSynthesisUtterance(textToSpeak);
                utterance.lang = 'pt-BR'; // Set language to Brazilian Portuguese
                synth.speak(utterance);
            }
        });
    });
});