<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontaktirajte Nas</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">
        <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 grid grid-cols-1 md:grid-cols-2 overflow-hidden animate__animated animate__fadeIn">
         
            <div class="bg-blue-600 text-white p-8 flex flex-col justify-center">
                <h3 class="text-2xl font-bold mb-4">Kontaktirajte Nas</h3>
                <p class="mb-4">Imate li pitanja ili prijedloge? Javite nam se putem kontakt obrasca.</p>
                <div class="space-y-3">
                  
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h3m-3-9a9 9 0 01-9 9m9-9a9 9 0 00-9 9m0 0c0 3.042 1.135 5.824 3 7.938" />
                        </svg>
                        <span>IG aurashop.fn</span>
                    </div>
                    <a href="/chat" class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                        </svg>
                        Chat
                    </a></li>
                </div>
            </div>

            <div class="p-8">
                <form id="contactForm" class="space-y-4">
                
                    <input 
                        type="text" 
                        name="honeypot" 
                        class="hidden" 
                        tabindex="-1" 
                        autocomplete="off"
                    >

                    <div>
                        <label class="block mb-2 text-gray-700">Ime:</label>
                        <input 
                            type="text" 
                            id="nameInput" 
                            required 
                            maxlength="50"
                            class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none"
                            placeholder="Vaše puno ime"
                        >
                    </div>

                    <div>
                        <label class="block mb-2 text-gray-700">Email:</label>
                        <input 
                            type="email" 
                            id="emailInput" 
                            required 
                            maxlength="100"
                            class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none"
                            placeholder="Vaša email adresa"
                        >
                    </div>

                    <div>
                        <label class="block mb-2 text-gray-700">Poruka:</label>
                        <textarea 
                            id="messageInput" 
                            required 
                            maxlength="500"
                            rows="4"
                            class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none"
                            placeholder="Vaša poruka (max 500 znakova)"
                        ></textarea>
                    </div>

                    <button 
                        type="submit" 
                        class="w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105"
                    >
                        Pošalji Poruku
                    </button>
                </form>

                <div 
                    id="feedbackContainer" 
                    class="mt-4 p-4 rounded-md hidden text-center"
                >
                    <p id="feedbackText"></p>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 text-center">
            © 2024 Aurashop.fn
        </div>
    </footer>
<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');
});
    document.getElementById('contactForm').addEventListener('submit', async (e) => {
        e.preventDefault();

        const nameInput = document.getElementById('nameInput');
        const emailInput = document.getElementById('emailInput');
        const messageInput = document.getElementById('messageInput');
        const feedbackContainer = document.getElementById('feedbackContainer');
        const feedbackText = document.getElementById('feedbackText');

        if (!nameInput.value.trim() || !emailInput.value.trim() || !messageInput.value.trim()) {
            feedbackContainer.className = 'mt-4 p-4 bg-red-100 rounded-md';
            feedbackText.textContent = 'Molimo popunite sva polja.';
            feedbackContainer.classList.remove('hidden');
            return;
        }

        try {
            const response = await fetch('/api/contact', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: nameInput.value,
                    email: emailInput.value,
                    message: messageInput.value
                })
            });

            const result = await response.json();

            if (result.success) {
                feedbackContainer.className = 'mt-4 p-4 bg-green-100 rounded-md';
                feedbackText.textContent = 'Poruka uspješno poslana!';
                
                nameInput.value = '';
                emailInput.value = '';
                messageInput.value = '';
            } else {
                feedbackContainer.className = 'mt-4 p-4 bg-red-100 rounded-md';
                feedbackText.textContent = result.message || 'Greška prilikom slanja.';
            }

            feedbackContainer.classList.remove('hidden');
        } catch (error) {
            feedbackContainer.className = 'mt-4 p-4 bg-red-100 rounded-md';
            feedbackText.textContent = 'Mrežna greška. Pokušajte ponovno.';
            feedbackContainer.classList.remove('hidden');
        }
    });
    </script>
</body>
</html>