<!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">
    <link rel="stylesheet" href="/ecommerce/templates/default/style.css">
    <style>
        .product-detail-page { padding: 2rem 0; }
        .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
        .product-image-large { width: 100%; height: 500px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .product-detail-info h1 { font-size: 2.5rem; margin-bottom: 1rem; }
        .product-price-large { font-size: 3rem; font-weight: bold; color: #ff6a00; margin: 1.5rem 0; }
        .product-meta { margin: 1rem 0; color: #666; }
        .quantity-selector { display: flex; align-items: center; gap: 1rem; margin: 2rem 0; }
        .quantity-selector input { width: 100px; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 4px; font-size: 1.1rem; }
        .btn-large { padding: 1rem 2rem; font-size: 1.2rem; }
        @media (max-width: 768px) {
            .product-detail { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body class="template-default">
    <header class="store-header">
        <div class="header-container">
            <a href="/loja" class="logo-section">
                <?php if (!empty($config['logo_url'])): ?>
                    <img src="<?= htmlspecialchars($config['logo_url']) ?>" alt="<?= htmlspecialchars($config['store_name'] ?? 'Loja') ?>" class="logo-img">
                <?php else: ?>
                    <h1 class="logo-text"><?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></h1>
                <?php endif; ?>
            </a>
            <nav class="main-nav">
                <a href="/loja">Início</a>
                <a href="/loja/carrinho" class="cart-link">
                    Carrinho <span id="cart-count" class="cart-badge">0</span>
                </a>
            </nav>
        </div>
    </header>

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

    <footer class="store-footer">
        <div class="footer-container">
            <div class="footer-info">
                <h3><?= htmlspecialchars($config['store_name'] ?? 'Loja') ?></h3>
                <?php if (!empty($config['whatsapp'])): ?>
                    <p><strong>WhatsApp:</strong> <a href="https://wa.me/<?= preg_replace('/\D/', '', $config['whatsapp']) ?>" target="_blank"><?= htmlspecialchars($config['whatsapp']) ?></a></p>
                <?php endif; ?>
                <?php if (!empty($config['email_contato'])): ?>
                    <p><strong>E-mail:</strong> <a href="mailto:<?= htmlspecialchars($config['email_contato']) ?>"><?= htmlspecialchars($config['email_contato']) ?></a></p>
                <?php endif; ?>
            </div>
            <div class="footer-copyright">
                <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($config['store_name'] ?? 'Loja') ?>. Todos os direitos reservados.</p>
            </div>
        </div>
    </footer>

    <script>
        const productId = <?= $produto['id'] ?? 0 ?>;
        const productPrice = <?= (float)($produto['custom_price'] ?? $produto['preco'] ?? 0) ?>;
        
        function addToCart() {
            const quantity = parseInt(document.getElementById('quantity').value);
            let cart = JSON.parse(localStorage.getItem('cart') || '[]');
            
            const existingIndex = cart.findIndex(item => item.id === productId);
            if (existingIndex >= 0) {
                cart[existingIndex].quantidade += quantity;
            } else {
                cart.push({
                    id: productId,
                    nome: '<?= addslashes($produto['nome'] ?? '') ?>',
                    preco: productPrice,
                    quantidade: quantity
                });
            }
            
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartCount();
            alert(`Adicionado ${quantity} unidade(s) ao carrinho!`);
        }
        
        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 ? 'inline-block' : 'none';
            }
        }
        
        document.addEventListener('DOMContentLoaded', () => {
            updateCartCount();
        });
    </script>
</body>
</html>

