script.js

document.addEventListener('DOMContentLoaded', function() {
    const chatPopup = document.getElementById('chat-popup');
    const minimizedChat = document.getElementById('minimized-chat');
    const minimizeBtn = document.getElementById('minimize-btn');
    const closeBtn = document.getElementById('close-btn');
    const themeToggle = document.getElementById('theme-toggle');
    const chatMessages = document.getElementById('chat-messages');
    const messageInput = document.querySelector('input[type="text"]');
    const sendBtn = document.querySelector('button:nth-last-child(1)');

    // Theme toggle
    themeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        feather.replace();
    });
    // Toggle chat
    minimizedChat.addEventListener('click', () => {
        chatPopup.classList.toggle('hidden');
    });

    // Close chat
    closeBtn.addEventListener('click', () => {
        chatPopup.classList.add('hidden');
    });
// Send message
    function sendMessage() {
        const message = messageInput.value.trim();
        if (message) {
            const messageElement = document.createElement('div');
            messageElement.className = 'flex justify-end chat-message';
            messageElement.innerHTML = `
                <div class="bg-primary-500 text-white rounded-lg p-3 max-w-xs">
                    <p>${message}</p>
                    <p class="text-xs text-primary-100 text-right mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
                </div>
            `;
            chatMessages.appendChild(messageElement);
            messageInput.value = '';
            chatMessages.scrollTop = chatMessages.scrollHeight;

            // Simulate reply after 1 second
            setTimeout(() => {
                const replyElement = document.createElement('div');
                replyElement.className = 'flex justify-start chat-message';
                replyElement.innerHTML = `
                    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 max-w-xs">
                        <p class="text-gray-800 dark:text-gray-200">Thank you for your message. Our team will get back to you shortly.</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
                    </div>
                `;
                chatMessages.appendChild(replyElement);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }, 1000);
        }
    }

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

    // Auto-scroll to bottom of chat
    chatMessages.scrollTop = chatMessages.scrollHeight;
});