<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Naše Usluge i Proizvodi</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>
    <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;
        }

        .navbar-links li a {
            text-decoration: none;
            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: #2563eb;
            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;
            }
        }

        .modal-enter {
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 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">
            <div class="navbar">
                <div class="brand flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" 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="M15 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                    Aurashop.fn
                </div>
                <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>
            </div>
        </div>
    </nav>


    <div class="container mx-auto px-4 pt-24 pb-12">
        <h1 class="text-4xl font-bold text-center mb-12 text-gray-800">Naši Proizvodi</h1>
        <div id="products-grid" class="grid md:grid-cols-3 gap-8"></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>

    
    <script>
        const products = [
            {
                name: "DOLAZI UBRZO",
        description: "",
        price: 0,
        imageUrl: ""  
            },
            {
                name: "DOLAZI UBRZO",
                description: "",
                price: 0,
                imageUrl: "/api/placeholder/400/300"
            },
            {
                name: "DOLAZI UBRZO",
                description: "",
                price: 0,
                imageUrl: "/api/placeholder/400/300"
            }
        ];

        const productsGrid = document.getElementById('products-grid');

        products.forEach(product => {
    const productCard = document.createElement('div');
    productCard.className = 'bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all transform hover:-translate-y-2';
    
    const defaultImage = '/views/images/placeholder.jpg';
    

    
    productCard.innerHTML = `
        <img 
            src="${product.imageUrl}" 
            alt="${product.name}" 
            class="w-full h-48 object-cover"
            onerror="this.onerror=null; this.src='${defaultImage}'"
        >
        <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">${product.name}</h3>
            <p class="text-white-600 mb-4">${product.description}</p>
            <div class="flex justify-between items-center">
                <span class="text-2xl font-bold text-blue-600">${product.price} €</span>
                <button class="purchase-btn bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition flex items-center">
                    Kupi
                </button>
            </div>
        </div>
    `;
    productsGrid.appendChild(productCard);
});
    </script>

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

        toggleButton.addEventListener('click', () => {
            navbarLinks.classList.toggle('active');
        });
    </script>

    <script src="/js/purchase-form.js"></script>
</body>
</html>