const toggle = document.getElementById('theme-toggle');
const root = document.documentElement;
const stored = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isLight = stored ? stored === 'light' : !prefersDark;

if (isLight) {
    root.classList.add('light');
}
toggle.textContent = isLight ? 'DARK' : 'LIGHT';

toggle.addEventListener('click', () => {
    root.classList.toggle('light');
    const light = root.classList.contains('light');
    toggle.textContent = light ? 'DARK' : 'LIGHT';
    localStorage.setItem('theme', light ? 'light' : 'dark');
});

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