<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></title>
    <link rel="stylesheet" href="/css/theme.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        .header { background: var(--color-white, #fff); border-bottom: 1px solid #e5e7eb; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: bold; color: var(--color-olive, #556b2f); }
        .nav { display: flex; gap: 1rem; }
        .nav a { color: #374151; text-decoration: none; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
        .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; }
        .product-card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
        .product-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .product-image { width: 100%; height: 200px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
        .product-info { padding: 1rem; }
        .product-name { font-weight: 600; margin-bottom: 0.5rem; }
        .product-price { font-size: 1.25rem; font-weight: bold; color: var(--color-orange, #ff6a00); }
        .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--color-orange, #ff6a00); color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; }
        .btn:hover { filter: brightness(0.95); }
        .footer { background: #1c1c1c; color: white; padding: 2rem 0; margin-top: 4rem; text-align: center; }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo"><?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></div>
            <nav class="nav">
                <a href="/loja">Início</a>
                <a href="/loja/carrinho">Carrinho</a>
            </nav>
        </div>
    </header>

    <main class="container">
        <h1>Produtos em Destaque</h1>
        <div id="products-grid" class="products-grid">
            <p>Carregando produtos...</p>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></p>
        <?php if (!empty($config['whatsapp'])): ?>
            <p>WhatsApp: <?= htmlspecialchars($config['whatsapp']) ?></p>
        <?php endif; ?>
        <?php if (!empty($config['email_contato'])): ?>
            <p>E-mail: <?= htmlspecialchars($config['email_contato']) ?></p>
        <?php endif; ?>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            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>Nenhum produto disponível no momento.</p>';
                        return;
                    }
                    
                    grid.innerHTML = data.map(produto => `
                        <div class="product-card">
                            <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>
                                <a href="/loja/produto/${produto.id}" class="btn" style="margin-top: 0.5rem; display: block; text-align: center;">Ver Detalhes</a>
                            </div>
                        </div>
                    `).join('');
                }
            } catch (error) {
                console.error('Erro ao carregar produtos:', error);
                document.getElementById('products-grid').innerHTML = '<p>Erro ao carregar produtos.</p>';
            }
        });
    </script>
</body>
</html>

