<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($produto['nome'] ?? 'Produto') ?> - <?= 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; }
        .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
        .product-image { width: 100%; height: 400px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .product-info h1 { font-size: 2rem; margin-bottom: 1rem; }
        .product-price { font-size: 2rem; font-weight: bold; color: var(--color-orange, #ff6a00); margin: 1rem 0; }
        .btn { display: inline-block; padding: 0.75rem 2rem; background: var(--color-orange, #ff6a00); color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 1.1rem; }
        .btn:hover { filter: brightness(0.95); }
        .quantity { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
        .quantity input { width: 80px; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px; }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <a href="/loja" class="logo"><?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></a>
            <nav class="nav">
                <a href="/loja">Início</a>
                <a href="/loja/carrinho">Carrinho</a>
            </nav>
        </div>
    </header>

    <main class="container">
        <div class="product-detail">
            <div class="product-image">Imagem do Produto</div>
            <div class="product-info">
                <h1><?= htmlspecialchars($produto['nome'] ?? 'Produto') ?></h1>
                <div class="product-price">R$ <?= number_format((float)($produto['preco_final'] ?? $produto['preco'] ?? 0), 2, ',', '.') ?></div>
                <p>Código: <?= htmlspecialchars($produto['codigo'] ?? '') ?></p>
                <p>Estoque: <?= htmlspecialchars($produto['estoque'] ?? 0) ?> unidades</p>
                
                <div class="quantity">
                    <label>Quantidade:</label>
                    <input type="number" id="quantity" value="1" min="1" max="<?= htmlspecialchars($produto['estoque'] ?? 1) ?>">
                </div>
                
                <button class="btn" onclick="addToCart()">Adicionar ao Carrinho</button>
            </div>
        </div>
    </main>

    <script>
        const productId = <?= $produto['id'] ?? 0 ?>;
        
        function addToCart() {
            const quantity = parseInt(document.getElementById('quantity').value);
            // Implementar lógica de carrinho (localStorage ou API)
            alert(`Adicionado ${quantity} unidade(s) ao carrinho!`);
        }
    </script>
</body>
</html>

