document.addEventListener('DOMContentLoaded', function() {
    const initialChoiceDiv = document.getElementById('initial-choice');
    const guestFormDiv = document.getElementById('guest-form-div');
    const registerFormDiv = document.getElementById('register-form-div');

    const showGuestBtn = document.getElementById('show-guest-form');
    const showRegisterBtn = document.getElementById('show-register-form');

    const guestForm = document.getElementById('guest-form');
    const registerForm = document.getElementById('register-form');

    if (showGuestBtn) {
        showGuestBtn.addEventListener('click', () => {
            initialChoiceDiv.classList.add('hidden');
            guestFormDiv.classList.remove('hidden');
        });
    }

    if (showRegisterBtn) {
        showRegisterBtn.addEventListener('click', () => {
            initialChoiceDiv.classList.add('hidden');
            registerFormDiv.classList.remove('hidden');
        });
    }

    if (guestForm) {
        guestForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('guest-username').value;
            if (username.trim() === '') {
                alert('Por favor, ingresa un nombre de usuario.');
            } else {
                alert(`¡Bienvenido, ${username}! La lógica del juego se implementará en el siguiente paso.`);
            }
        });
    }

    if (registerForm) {
        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('register-username').value;
            const email = document.getElementById('register-email').value;
            if (username.trim() === '' || email.trim() === '') {
                alert('Por favor, completa todos los campos.');
            } else {
                alert(`¡Registro exitoso para ${username}! La lógica de inicio de sesión se implementará a continuación.`);
            }
        });
    }
});