document.addEventListener('DOMContentLoaded', function() {
    const chatWidgetButton = document.getElementById('chat-widget-button');
    const chatWidget = document.getElementById('chat-widget');
    const closeButton = document.getElementById('chat-widget-close');
    const chatBody = document.getElementById('chat-widget-body');
    const chatInput = document.getElementById('chat-input');
    const sendButton = document.getElementById('send-button');

    chatWidgetButton.addEventListener('click', () => {
        chatWidget.style.display = 'flex';
        chatWidgetButton.style.display = 'none';
    });

    closeButton.addEventListener('click', () => {
        chatWidget.style.display = 'none';
        chatWidgetButton.style.display = 'block';
    });

    const sendMessage = () => {
        const message = chatInput.value.trim();
        if (message) {
            addMessage(message, 'user');
            chatInput.value = '';
            setTimeout(() => {
                addMessage('Thanks for your message! An agent will be with you shortly.', 'bot');
            }, 1000);
        }
    };

    sendButton.addEventListener('click', sendMessage);

    chatInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    function addMessage(text, type) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('chat-message', type);
        messageElement.textContent = text;
        chatBody.appendChild(messageElement);
        chatBody.scrollTop = chatBody.scrollHeight;
    }
});