<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <%- include('partials/header') %>

    <main class="container">
        <section class="product-grid">
            <h2>Semua Produk</h2>
            <div class="grid-container">
                <% produk.forEach(product => { %>
                    <div class="product-card">
                        <% if (product.isBestSeller) { %>
                            <span class="product-label best-seller">Terlaris!</span>
                        <% } %>
                        <% if (product.isNew) { %>
                            <span class="product-label new-product">Baru!</span>
                        <% } %>
                        <% if (product.isPromo) { %>
                            <span class="product-label promo-product">Promo!</span>
                        <% } %>
                        <img src="<%= product.gambar %>" alt="<%= product.nama %>">
                        <h3><%= product.nama %></h3>
                        <p><%= product.deskripsi %></p>
                        <span class="price">Rp <%= product.harga.toLocaleString('id-ID') %></span>
                        <a href="https://wa.me/NO-WA-KAMU?text=Halo%2C%20saya%20tertarik%20dengan%20produk%20<%= encodeURIComponent(product.nama) %>%20seharga%20Rp%20<%= product.harga.toLocaleString('id-ID') %>."
                           target="_blank" class="btn-whatsapp">
                            <i class="fab fa-whatsapp"></i> Pesan via WA
                        </a>
                    </div>
                <% }); %>
            </div>
        </section>
        
        <section class="catalog-cta">
            <div class="container">
                <h3>Belum menemukan yang Anda cari?</h3>
                <p>Atau ingin bertanya lebih lanjut tentang produk spesial kami?</p>
                <a href="https://wa.me/NO-WA-KAMU?text=Halo%2C%20saya%20ingin%20bertanya%20tentang%20produk%20Snack%20Pedas%20Mantap." target="_blank" class="btn-whatsapp large-btn">
                    <i class="fab fa-whatsapp"></i> Hubungi Kami Via WhatsApp
                </a>
                <p class="small-text">Kami siap membantu Anda menemukan snack pedas favorit!</p>
            </div>
        </section>
    </main>

    <%- include('partials/footer') %>

    <script src="/js/script.js"></script>
</body>
</html>