<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ - Naša PoslovnaStranica</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://unpkg.com/lucide-icons"></script>
</head>
<body class="bg-gray-50 text-gray-900 overflow-x-hidden font-sans">

    <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="pt-24 pb-12 bg-gradient-to-br from-blue-500 to-purple-600 text-white">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Često Postavljena Pitanja</h1>
            <p class="text-xl opacity-90 max-w-2xl mx-auto">Pronađite odgovore na najčešća pitanja o našim uslugama</p>
        </div>
    </div>


    <div class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 max-w-4xl">

            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <button data-category="all" class="category-btn active px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition">Sve</button>
                <button data-category="services" class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-blue-600 hover:text-white transition">Usluge</button>
                <button data-category="payment" class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-blue-600 hover:text-white transition">Plaćanje</button>
                <button data-category="support" class="category-btn px-6 py-2 rounded-full bg-gray-200 hover:bg-blue-600 hover:text-white transition">Podrška</button>
            </div>


           <div class="space-y-4">
            <div class="faq-item bg-white rounded-lg shadow-md overflow-hidden" data-categories="services">
                <button class="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50">
                    <span class="text-lg font-semibold">Koje usluge nudite?</span>
                    <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-answer hidden px-6 py-4 border-t">
                    <p class="text-gray-600">Nudimo širok spektar usluga uključujući digitalnu transformaciju, poslovno savjetovanje i IT infrastrukturu. Svaka usluga je prilagođena potrebama vašeg poslovanja.</p>
                </div>
            </div>

            <div class="faq-item bg-white rounded-lg shadow-md overflow-hidden" data-categories="support">
                <button class="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50">
                    <span class="text-lg font-semibold">Kako započeti suradnju?</span>
                    <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-answer hidden px-6 py-4 border-t">
                    <p class="text-gray-600">Suradnju možete započeti kontaktiranjem našeg tima putem kontakt forme ili direktnim pozivom. Organiziramo inicijalni sastanak gdje detaljno razgovaramo o vašim potrebama.</p>
                </div>
            </div>

            <div class="faq-item bg-white rounded-lg shadow-md overflow-hidden" data-categories="payment">
                <button class="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50">
                    <span class="text-lg font-semibold">Koji su načini plaćanja?</span>
                    <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-answer hidden px-6 py-4 border-t">
                    <p class="text-gray-600">Prihvaćamo različite načine plaćanja uključujući bankovni transfer, kreditne kartice i PayPal. Također nudimo mogućnost plaćanja u ratama za veće projekte.</p>
                </div>
            </div>
            <div class="faq-item bg-white rounded-lg shadow-md overflow-hidden" data-categories="payment">
                <button class="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50">
                    <span class="text-lg font-semibold">Koji su načini plaćanja?</span>
                    <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="faq-answer hidden px-6 py-4 border-t">
                    <p class="text-gray-600">Prihvaćamo različite načine plaćanja uključujući bankovni transfer, kreditne kartice i PayPal. Također nudimo mogućnost plaćanja u ratama za veće projekte.</p>
                </div>
            </div>
        </div>
    </div>
</div>

    <section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl font-bold mb-6">Niste pronašli odgovor?</h2>
            <p class="text-xl mb-8 text-gray-600">Kontaktirajte nas direktno i odgovorit ćemo na sva vaša pitanja</p>
            <a href="/contact" class="inline-flex items-center bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition">
                <lucide-mail class="mr-2" />
                Kontaktirajte Nas
            </a>
        </div>
    </section>

    <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');
});
        const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
        const navMenu = document.querySelector('nav .md\\:flex');
        
        mobileMenuToggle.addEventListener('click', () => {
            navMenu.classList.toggle('hidden');
            navMenu.classList.toggle('absolute');
            navMenu.classList.toggle('top-full');
            navMenu.classList.toggle('left-0');
            navMenu.classList.toggle('right-0');
            navMenu.classList.toggle('bg-white');
        });

        document.querySelectorAll('.faq-item button').forEach(button => {
            button.addEventListener('click', () => {
                const answer = button.nextElementSibling;
                const icon = button.querySelector('svg');
                
                document.querySelectorAll('.faq-answer').forEach(a => {
                    if (a !== answer) {
                        a.classList.add('hidden');
                        a.previousElementSibling.querySelector('svg').classList.remove('rotate-180');
                    }
                });

                answer.classList.toggle('hidden');
                icon.classList.toggle('rotate-180');
            });
        });

        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.addEventListener('click', () => {
               
                document.querySelectorAll('.category-btn').forEach(b => {
                    b.classList.remove('active', 'bg-blue-600', 'text-white');
                    b.classList.add('bg-gray-200');
                });
                btn.classList.remove('bg-gray-200');
                btn.classList.add('active', 'bg-blue-600', 'text-white');

                const selectedCategory = btn.dataset.category;
                const faqItems = document.querySelectorAll('.faq-item');

                faqItems.forEach(item => {
                    if (selectedCategory === 'all' || item.dataset.categories.includes(selectedCategory)) {
                        item.style.display = '';
                       
                        item.classList.add('animate__animated', 'animate__fadeIn');
                        setTimeout(() => {
                            item.classList.remove('animate__animated', 'animate__fadeIn');
                        }, 500);
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>