document.addEventListener('DOMContentLoaded', () => {
    console.log('App initialized.');

    // Helper: Toggles a class on an element
    const toggleClass = (selector, className) => {
        const el = document.querySelector(selector);
        if (el) {
            el.classList.toggle(className);
        }
    };

    // Helper: Attach event listener safely
    const addEvent = (selector, event, handler) => {
        const els = document.querySelectorAll(selector);
        els.forEach(el => el.addEventListener(event, handler));
    };

    // Example: Tab switching logic (can be expanded)
    addEvent('.tab-btn', 'click', (e) => {
        const targetId = e.currentTarget.dataset.target;
        
        // Remove active from all tabs
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');
        
        // Add active to clicked tab
        e.currentTarget.classList.add('active');
        const targetContent = document.getElementById(targetId);
        if (targetContent) {
            targetContent.style.display = 'block';
        }
    });

    // Auto-dismiss alerts after 5 seconds
    setTimeout(() => {
        document.querySelectorAll('.alert').forEach(alert => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 300);
        });
    }, 5000);
});