When a support ticket is logged it must be able to send an email to yitsupport@y-it.co.za with a prompt that says your ticket has been logged. An Engineer will be reach out as soon as they are available. Please also integrate a chat section with an AI Bot that can answer all questions relating to IT support

index.html

@@ -144,10 +144,30 @@
             </div>
         </div>
     </section>
+    <!-- Chat Bot Section -->
+    <div id="chatBotContainer" class="fixed bottom-8 right-8 z-50 hidden">
+        <div class="bg-gunmetal rounded-t-lg shadow-xl w-80 h-96 flex flex-col">
+            <div class="bg-onyx p-4 rounded-t-lg flex justify-between items-center">
+                <h3 class="text-white font-semibold">IT Support Assistant</h3>
+                <button id="closeChat" class="text-silver hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div id="chatMessages" class="flex-1 p-4 overflow-y-auto"></div>
+            <div class="p-4 border-t border-silver">
+                <input type="text" id="userMessage" placeholder="Type your IT question..." 
+                       class="w-full px-4 py-2 rounded form-input text-white">
+            </div>
+        </div>
+    </div>
+
+    <button id="openChat" class="fixed bottom-8 right-8 bg-silver text-black p-4 rounded-full shadow-lg z-40">
+        <i data-feather="message-square"></i>
+    </button>
 
     <!-- Ticket Section -->
-    <section id="ticket" class="py-20 bg-gunmetal">
-        <div class="container mx-auto px-4">
+    <section id="ticket" class="py-20 bg-gunmetal hovered-element">
+<div class="container mx-auto px-4">
             <div class="max-w-4xl mx-auto">
                 <div class="text-center mb-12">
                     <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Log a <span class="text-silver">Support Ticket</span></h2>
@@ -254,12 +274,10 @@
             points: 12.00,
             maxDistance: 25.00
         });
-
-        // Handle form submission
+        // Handle form submission with email
         document.getElementById('ticketForm').addEventListener('submit', function(e) {
             e.preventDefault();
             
-            // Collect form data
             const formData = {
                 name: document.getElementById('name').value,
                 email: document.getElementById('email').value,
@@ -267,19 +285,104 @@
                 priority: document.getElementById('priority').value,
                 issue: document.getElementById('issue').value
             };
-            
-            // Here you would typically send the form data to your server
-            console.log('Ticket submitted:', formData);
-            
-            // Show success message
-            alert('Your support ticket has been submitted successfully! Our team will contact you shortly.');
-            
-            // Reset form
-            this.reset();
+
+            // Send email via Formspree or similar service
+            fetch('https://formspree.io/f/yitsupport@y-it.co.za', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: formData.name,
+                    email: formData.email,
+                    phone: formData.phone,
+                    priority: formData.priority,
+                    issue: formData.issue,
+                    _subject: `Support Ticket (${formData.priority} priority)`
+                })
+            })
+            .then(response => {
+                if (response.ok) {
+                    alert('Your support ticket has been logged successfully! An engineer will reach out as soon as they are available.');
+                    this.reset();
+                } else {
+                    throw new Error('Failed to submit ticket');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('There was an error submitting your ticket. Please try again or contact us directly.');
+            });
+        });
+
+        // Chat Bot functionality
+        const chatBot = {
+            responses: {
+                "hello": "Hello! How can I assist you with your IT support needs today?",
+                "password": "For password resets, please visit our support portal or contact your system administrator.",
+                "email": "Email issues can often be resolved by checking your internet connection or email settings. Would you like more specific troubleshooting?",
+                "slow": "Slow performance can be caused by many factors. Try restarting your device or checking for background processes using resources.",
+                "default": "I'm sorry, I didn't understand that. Could you rephrase your IT support question?"
+            },
+            getResponse: function(question) {
+                question = question.toLowerCase();
+                for (const [key, value] of Object.entries(this.responses)) {
+                    if (question.includes(key)) {
+                        return value;
+                    }
+                }
+                return this.responses.default;
+            }
+        };
+
+        document.getElementById('openChat').addEventListener('click', function() {
+            document.getElementById('chatBotContainer').classList.remove('hidden');
+            this.classList.add('hidden');
+            feather.replace();
+        });
+
+        document.getElementById('closeChat').addEventListener('click', function() {
+            document.getElementById('chatBotContainer').classList.add('hidden');
+            document.getElementById('openChat').classList.remove('hidden');
+            feather.replace();
+        });
+
+        document.getElementById('userMessage').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter' && this.value.trim() !== '') {
+                const userMessage = this.value;
+                const chatMessages = document.getElementById('chatMessages');
+                
+                // Add user message
+                chatMessages.innerHTML += `
+                    <div class="flex justify-end mb-2">
+                        <div class="bg-silver text-black rounded-lg p-2 max-w-xs">
+                            ${userMessage}
+                        </div>
+                    </div>
+                `;
+                
+                // Get and add bot response
+                const botResponse = chatBot.getResponse(userMessage);
+                setTimeout(() => {
+                    chatMessages.innerHTML += `
+                        <div class="flex justify-start mb-2">
+                            <div class="bg-onyx text-silver rounded-lg p-2 max-w-xs">
+                                ${botResponse}
+                            </div>
+                        </div>
+                    `;
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }, 500);
+                
+                this.value = '';
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
         });
 
         // Initialize feather icons
         feather.replace();
+        // Add this to your head section or before the closing body tag
+        <link href="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.css" rel="stylesheet">
     </script>
 </body>
 </html>