add pop up and logic for the chat button, raise a AI chat flow

index.html

@@ -155,22 +155,113 @@
             <p>&copy; 2023 Daniel's IT Consulting. All rights reserved.</p>
         </div>
     </footer>
-    <!-- AI Chat Button -->
+    <!-- AI Chat Button and Modal -->
     <div class="fixed bottom-6 right-6">
         <button id="chatButton" class="bg-orange-500 hover:bg-orange-600 text-white rounded-full p-4 shadow-lg transition duration-300">
             <i data-feather="message-circle" class="w-6 h-6"></i>
         </button>
     </div>
 
+    <!-- Chat Modal -->
+    <div id="chatModal" class="fixed bottom-24 right-6 w-80 bg-white rounded-lg shadow-xl hidden flex flex-col" style="height: 500px;">
+        <div class="bg-orange-500 text-white p-3 rounded-t-lg flex justify-between items-center">
+            <h3 class="font-semibold">AI Assistant</h3>
+            <button id="closeChat" class="text-white hover:text-orange-200">
+                <i data-feather="x"></i>
+            </button>
+        </div>
+        
+        <div id="chatMessages" class="flex-1 p-4 overflow-y-auto">
+            <div class="mb-4">
+                <div class="bg-gray-100 p-3 rounded-lg max-w-xs">
+                    <p>Hello! I'm your AI assistant. How can I help you with your IT consulting needs today?</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="p-3 border-t">
+            <div class="flex">
+                <input id="chatInput" type="text" placeholder="Type your message..." 
+                    class="flex-1 px-3 py-2 border rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500">
+                <button id="sendMessage" class="bg-orange-500 text-white px-4 py-2 rounded-r-lg hover:bg-orange-600">
+                    <i data-feather="send"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script>
         feather.replace();
         
-        // Chat button functionality
-        document.getElementById('chatButton').addEventListener('click', function() {
-            // Replace this with your actual chat implementation
-            alert('AI Chat feature will be implemented here!');
+        const chatButton = document.getElementById('chatButton');
+        const chatModal = document.getElementById('chatModal');
+        const closeChat = document.getElementById('closeChat');
+        const chatInput = document.getElementById('chatInput');
+        const sendMessage = document.getElementById('sendMessage');
+        const chatMessages = document.getElementById('chatMessages');
+
+        // Toggle chat modal
+        chatButton.addEventListener('click', function() {
+            chatModal.classList.toggle('hidden');
+        });
+
+        // Close chat
+        closeChat.addEventListener('click', function() {
+            chatModal.classList.add('hidden');
         });
+
+        // Send message
+        sendMessage.addEventListener('click', sendChatMessage);
+        chatInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendChatMessage();
+            }
+        });
+
+        function sendChatMessage() {
+            const message = chatInput.value.trim();
+            if (message) {
+                // Add user message
+                addMessage(message, 'user');
+                chatInput.value = '';
+                
+                // Simulate AI response after delay
+                setTimeout(() => {
+                    const responses = [
+                        "I understand you're asking about " + message + ". Can you provide more details?",
+                        "For " + message + ", we offer several solutions depending on your needs.",
+                        "That's an interesting question about " + message + ". Let me check our knowledge base.",
+                        "Many clients ask about " + message + ". Here's what we typically recommend..."
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    addMessage(randomResponse, 'ai');
+                }, 1000);
+            }
+        }
+
+        function addMessage(text, sender) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'mb-4 flex';
+            
+            if (sender === 'user') {
+                messageDiv.classList.add('justify-end');
+                messageDiv.innerHTML = `
+                    <div class="bg-orange-500 text-white p-3 rounded-lg max-w-xs">
+                        <p>${text}</p>
+                    </div>
+                `;
+            } else {
+                messageDiv.innerHTML = `
+                    <div class="bg-gray-100 p-3 rounded-lg max-w-xs">
+                        <p>${text}</p>
+                    </div>
+                `;
+            }
+            
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
     </script>
 </body>
 </html>