];
// ==== PLAYER Y CHAT SYNC ====
const chatMessages = document.getElementById('chatMessages');
let chatIndex = 0;
let userNameInput = "";
let ctaOffer = document.getElementById('ctaOffer');
// Simulación de viewers
const viewerCount = document.getElementById('viewerCount');
let viewers = 197 + Math.floor(Math.random()*18);
setInterval(()=> {
const delta = Math.floor(Math.random()*7) - 3;
viewers += delta;
if(viewers<153)viewers=153;if(viewers>233)viewers=233;
viewerCount.textContent = viewers;
}, 3000);
// Display de comentarios
function displayChatMessage(author, text, isUser=false, isModerator=false) {
let short = author.split(' ')[0] + (author.split(' ')[1]?.[0] ? ` ${author.split(' ')[1][0]}.` : '');
const msg = document.createElement('div');
msg.className = 'chat-message';
msg.innerHTML = `
${short}${isUser ? ' (Tú)' : ''}
${text}
`;
chatMessages.appendChild(msg);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Usuario chatea
document.getElementById('sendBtn').addEventListener('click', sendUserMsg);
document.getElementById('chatInput').addEventListener('keypress', e => {
if(e.key === 'Enter') sendUserMsg();
});
function sendUserMsg() {
const val = document.getElementById('chatInput').value.trim();
if (!val) return;
displayChatMessage(userName, val, true);
document.getElementById('chatInput').value = "";
// Respuesta ocasional del moderador
if (Math.random() < 0.25) {
setTimeout(() => {
const responses = [
`¡Excelente pregunta ${userShort}! Lo cubriremos en unos minutos`,
`Gracias por participar ${userShort} 🙌`,
`Muy buen punto ${userShort}, toma nota de esto`,
`${userShort} esa es una duda muy común, ya la aclaramos`
];
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
displayChatMessage("Moderador", randomResponse, false, true);
}, 2000 + Math.random() * 2000);
}
}
// Notificaciones de usuarios uniéndose
function showNotification(message) {
if (window.innerWidth <= 700) return; // No mostrar en móvil
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOutRight 0.5s ease-out';
setTimeout(() => notification.remove(), 500);
}, 4000);
}
// Simular usuarios uniéndose
function simulateUserJoins() {
const names = ["Juan Carlos", "Ana Paula", "Luis Miguel", "Sofia Rodríguez", "Carlos Díaz", "María Fernanda", "Pedro García", "Laura Sánchez", "Diego Martínez", "Valentina López"];
const randomName = names[Math.floor(Math.random() * names.length)];
showNotification(`${randomName} se unió al webinar`);
// Siguiente notificación en 30-60 segundos
const nextDelay = Math.floor(Math.random() * 30000) + 30000;
setTimeout(simulateUserJoins, nextDelay);
}
// Inicia masterclass
function startWebinar() {
userName = usernameInput.value.trim();
userShort = userName.split(' ')[0] + (userName.split(' ')[1]?.[0] ? ` ${userName.split(' ')[1][0]}.` : '');
overlay.style.display = 'none';
mainContainer.style.display = 'block';
// Cargar video
masterVideo.src = "https://www.youtube.com/embed/5xPPyEhmlWw?autoplay=1&mute=1&controls=0&disablekb=1&fs=0&loop=1&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&enablejsapi=1";
chatMessages.innerHTML = "";
displayChatMessage("Moderador", `¡Bienvenid@ ${userShort}! Gracias por unirte a la Masterclass en vivo 🎉`, false, true);
// Mostrar CTA después de 60 segundos
setTimeout(()=>ctaOffer.classList.add('show'), 60000);
// Iniciar notificaciones después de 20 segundos
setTimeout(simulateUserJoins, 20000);
runFakeChat();
}
// Fake chat con tiempo real y delay humano
function runFakeChat() {
let start = Date.now();
let vidStart = 0; // El video inicia desde el principio
function checkChat() {
let elapsed = Math.floor((Date.now() - start)/1000) + vidStart;
while(chatIndex < fakeComments.length && fakeComments[chatIndex].time <= elapsed){
const comment = fakeComments[chatIndex];
displayChatMessage(comment.author, comment.text, false, comment.moderator || false);
chatIndex++;
}
setTimeout(checkChat, 1800);
}
checkChat();
}