function handleOptionClick() {
    const chatBody = document.getElementById('chatBody');
    const userMsg = this.innerText;
    
    // Add User Message
    const userDiv = document.createElement('div');
    userDiv.className = 'msg user';
    userDiv.style.background = '#DCF8C6';
    userDiv.style.alignSelf = 'flex-end';
    userDiv.style.padding = '0.75rem 1rem';
    userDiv.style.borderRadius = '12px';
    userDiv.style.borderTopRightRadius = '0';
    userDiv.style.fontSize = '0.9rem';
    userDiv.style.maxWidth = '85%';
    userDiv.innerText = userMsg;
    chatBody.appendChild(userDiv);

    // Hide the options that were just clicked
    this.parentElement.style.display = 'none';

    // Bot Response
    setTimeout(() => {
        const botDiv = document.createElement('div');
        botDiv.className = 'msg bot';
        botDiv.style.background = 'white';
        botDiv.style.alignSelf = 'flex-start';
        botDiv.style.padding = '0.75rem 1rem';
        botDiv.style.borderRadius = '12px';
        botDiv.style.borderTopLeftRadius = '0';
        botDiv.style.fontSize = '0.9rem';
        botDiv.style.maxWidth = '85%';
        
        if (userMsg === 'Book Token' || userMsg === 'Book for Today') {
            botDiv.innerText = "Great! Please select your preferred time slot:";
            
            const optDiv = document.createElement('div');
            optDiv.className = 'msg-options';
            optDiv.style.display = 'flex';
            optDiv.style.flexDirection = 'column';
            optDiv.style.gap = '0.5rem';
            optDiv.style.paddingTop = '1rem';
            optDiv.innerHTML = `
                <button class="opt">10:00 AM</button>
                <button class="optSource-tag online">10:30 AM</button>
            `;
            chatBody.appendChild(botDiv);
            chatBody.appendChild(optDiv);
            bindOptions();
        } else if (userMsg === '10:00 AM' || userMsg === '10:30 AM') {
            botDiv.innerHTML = `✅ Confirmed! Your token is *#ON-3* for the ${userMsg} slot.<br><br>💳 *Payment Required*: Please pay ₹500 to activate your token: <a href="#">razorpay.me/Curio</a><br><br>Also, to help Dr. Sharma prepare, could you briefly describe your symptoms?`;
            chatBody.appendChild(botDiv);
        } else if (userMsg === 'Check Queue' || userMsg === 'Check Queue Status') {
            botDiv.innerText = "Current status: 5 people ahead of you. Estimated wait time: 25 minutes.";
            chatBody.appendChild(botDiv);
        } else {
            botDiv.innerText = "Got it. I've shared these details with Dr. Sharma. Your token is active. See you soon! 🏥";
            chatBody.appendChild(botDiv);
        }
        
        chatBody.scrollTop = chatBody.scrollHeight;
    }, 1000);
}

function bindOptions() {
    document.querySelectorAll('.opt').forEach(button => {
        button.onclick = null;
        button.addEventListener('click', handleOptionClick);
    });
}

// Initial bind
bindOptions();

// Scroll animations placeholder
window.addEventListener('scroll', () => {
    const nav = document.querySelector('.glass-nav');
    if (window.scrollY > 50) {
        nav.style.height = '70px';
        nav.style.background = 'rgba(255, 255, 255, 0.9)';
    } else {
        nav.style.height = '80px';
        nav.style.background = 'rgba(255, 255, 255, 0.7)';
    }
});