document.querySelectorAll('.example-cell').forEach(cell => {
    cell.addEventListener('click', () => {
        const video = cell.querySelector('video');
        const wasExpanded = cell.classList.contains('expanded');
        document.querySelectorAll('.example-cell.expanded').forEach(c => {
            c.classList.remove('expanded');
            c.querySelector('video').pause();
        });
        if (!wasExpanded) {
            cell.classList.add('expanded');
            video.play();
        }
    });
});

const featureDesc = document.getElementById('feature-desc');
document.querySelectorAll('.feature-tags button').forEach(btn => {
    btn.addEventListener('click', () => {
        const wasActive = btn.classList.contains('active');
        document.querySelectorAll('.feature-tags button.active').forEach(b => b.classList.remove('active'));
        if (wasActive) {
            featureDesc.textContent = '';
        } else {
            btn.classList.add('active');
            featureDesc.textContent = btn.dataset.desc;
        }
    });
});

document.getElementById('kofi-close').addEventListener('click', () => {
    document.getElementById('kofi-popup').style.display = 'none';
});

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        document.querySelectorAll('.example-cell.expanded').forEach(c => {
            c.classList.remove('expanded');
            c.querySelector('video').pause();
        });
    }
});