<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with AI</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900">

    <nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-md z-50 transition-all duration-300">
        <nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-md z-50 transition-all duration-300">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center">
                    <div class="text-2xl font-bold text-blue-600 flex items-center hover:scale-105 transition-transform">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 animate-pulse">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                        </svg>
                        Aurashop.fn
                    </div>
                </div>
                <nav class="navbar">
                 
                    <a href="#" class="toggle-button">
                      <span class="bar"></span>
                      <span class="bar"></span>
                      <span class="bar"></span>
                    </a>
                    <div class="navbar-links">
                      <ul>
                        <li><a href="/">Početna</a></li>
                        <li><a href="/about">O nama</a></li>
                        <li><a href="/usluge">Usluge</a></li>
                        <li><a href="/contact">Kontakt</a></li>
                        <li><a href="/convert">Konverter</a></li>
                      </ul>
                    </div>
                  </nav>
                
                <div class="md:hidden">
                    <button id="mobile-menu-toggle" class="text-white-600 hover:text-blue-600">
                        <lucide-menu />
                    </button>
                </div>
            </div>  
    </nav>

    <div class="min-h-screen pt-24 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center px-4">
        <div class="bg-white rounded-xl shadow-lg w-full max-w-4xl p-6">
            <h2 class="text-2xl font-bold mb-4 text-center">AI</h2>
            
            <div id="chatMessages" class="h-96 overflow-y-auto mb-4 p-4 border rounded-lg">
            
            </div>

            <form id="chatForm" class="flex gap-2">
                <input 
                    type="text" 
                    id="messageInput" 
                    class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
                    placeholder="Type your message..."
                    required
                >
                <button 
                    type="submit" 
                    class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-300"
                >
                    Send
                </button>
            </form>
        </div>
    </div>
<style>
                      .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
padding: 10px 20px;
  
}

.brand {
  color: #2563eb;
  font-size: 1.0rem;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
  
}

.navbar-links li {
  list-style: none;
}
/* ovo je za slova u nav baru */
.navbar-links li a {
  text-decoration: none;
  color: white;
  padding: 1rem;
  display: block;
  color: #2563eb;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: none;
    width: 100%;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul {
    flex-direction: column;
    width: 100%;
  }

  .navbar-links li {
    text-align: center;
  }

  .navbar-links.active {
    display: flex;
  }
}

</style>
    <script>
         const toggleButton = document.querySelector('.toggle-button');
const navbarLinks = document.querySelector('.navbar-links');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active');
});
        const chatMessages = document.getElementById('chatMessages');
        const chatForm = document.getElementById('chatForm');
        const messageInput = document.getElementById('messageInput');

        function appendMessage(message, isUser = false) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `mb-4 p-3 rounded-lg ${isUser ? 'bg-blue-100 ml-auto' : 'bg-gray-100'} max-w-[80%]`;
            messageDiv.textContent = message;
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        chatForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const message = messageInput.value.trim();
            if (!message) return;

            appendMessage(message, true);
            messageInput.value = '';

            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message })
                });

                const data = await response.json();
                
                if (data.success) {
                    appendMessage(data.response);
                } else {
                    appendMessage('Sorry, there was an error processing your request.');
                }
            } catch (error) {
                appendMessage('Sorry, there was an error connecting to the server.');
            }
        });
    </script>
</body>
</html>