// Script do Template Minimalista
document.addEventListener('DOMContentLoaded', async () => {
    await loadProducts();
    updateCartCount();
});

async function loadProducts() {
    try {
        const res = await fetch('/api/public/ecommerce/produtos?per_page=12');
        if (res.ok) {
            const { data } = await res.json();
            const grid = document.getElementById('products-grid');
            
            if (data.length === 0) {
                grid.innerHTML = '<p style="text-align: center; padding: 4rem; color: #999;">Nenhum produto disponível.</p>';
                return;
            }
            
            grid.innerHTML = data.map(produto => `
                <div class="product-card" onclick="window.location.href='/loja/produto/${produto.id}'">
                    <div class="product-image">Imagem</div>
                    <div class="product-info">
                        <div class="product-name">${produto.nome}</div>
                        <div class="product-price">R$ ${parseFloat(produto.preco_final || produto.preco).toFixed(2).replace('.', ',')}</div>
                    </div>
                </div>
            `).join('');
        }
    } catch (error) {
        console.error('Erro ao carregar produtos:', error);
        document.getElementById('products-grid').innerHTML = '<p style="text-align: center; color: #999;">Erro ao carregar produtos.</p>';
    }
}

function updateCartCount() {
    const cart = JSON.parse(localStorage.getItem('cart') || '[]');
    const count = cart.reduce((sum, item) => sum + (item.quantidade || 1), 0);
    const badge = document.getElementById('cart-count');
    if (badge) {
        badge.textContent = count;
        badge.style.display = count > 0 ? 'flex' : 'none';
    }
}

