document.addEventListener('DOMContentLoaded', () => {
    // Tab switching functionality
    const tabs = document.querySelectorAll('.tab a');
    tabs.forEach(tab => {
        tab.addEventListener('click', e => {
            e.preventDefault();
            document.querySelectorAll('.tab, .tab-pane').forEach(elem => elem.classList.remove('active'));
            tab.parentElement.classList.add('active');
            document.querySelector(tab.getAttribute('href')).classList.add('active');
        });
    });

    // Password validation in the registration form
    const passwordInput = document.getElementById('new-password');
    const confirmPasswordInput = document.getElementById('confirm-password');
    const handlePasswordValidation = () => {
        const isValid = passwordInput.value === confirmPasswordInput.value;
        [passwordInput, confirmPasswordInput].forEach(input => input.classList.toggle('invalid', !isValid));
        return isValid;
    };
    [passwordInput, confirmPasswordInput].forEach(input => input.addEventListener('input', handlePasswordValidation));
    const registrationForm = document.getElementById('registration-form');
    registrationForm.addEventListener('submit', event => {
        if (!handlePasswordValidation()) {
            event.preventDefault();
            alert("Passwords do not match.");
        }
    });

    // Simple login validation
    const loginForm = document.getElementById('login-form');
    loginForm.addEventListener('submit', event => {
        event.preventDefault();
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        if (username === 'test' && password === 'test') {
            document.getElementById('login-overlay').style.display = 'none';
        } else {
            alert("Invalid username or password");
        }
    });
});