<%- include('partials/head', { title: title }) %>
<%- include('partials/navbar', { active: 'produk' }) %>

<section class="reveal max-w-2xl mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="/" class="w-9 h-9 neo-sm bg-ink-850 grid place-items-center text-slate-300 hover:text-white transition">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-xl sm:text-2xl font-extrabold text-white"><%= product.name %></h1>
    </div>

    <div class="neo-flat bg-ink-900 p-5 sm:p-6">
        <div class="flex items-center gap-4 mb-4">
            <div class="w-14 h-14 neo-sm grid place-items-center shrink-0" style="background:<%= product.accent %>1a;color:<%= product.accent %>;">
                <i class="<%= product.icon %> text-2xl"></i>
            </div>
            <div>
                <span class="text-white font-extrabold text-2xl">Rp<%= product.price.toLocaleString('id-ID') %></span>
                <span class="text-slate-500 text-sm"><%= product.unit %></span>
            </div>
        </div>

        <p class="text-sm text-slate-300 leading-relaxed mb-5"><%= product.description %></p>

        <div class="space-y-2 mb-6">
            <% product.features.forEach(f => { %>
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <i class="fas fa-circle-check text-brand-400"></i> <%= f %>
                </div>
            <% }) %>
        </div>

        <form action="/checkout/create" method="POST" class="space-y-3">
            <input type="hidden" name="slug" value="<%= product.slug %>">

            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-1.5">Nomor WhatsApp <span class="text-red-400">*</span></label>
                <input type="tel" name="phone" required placeholder="08xxxxxxxxxx"
                    class="neo-sm w-full bg-ink-850 px-3.5 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-brand-500/20">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-1.5">Email <span class="text-red-400">*</span></label>
                <input type="email" name="email" required placeholder="nama@email.com"
                    class="neo-sm w-full bg-ink-850 px-3.5 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-brand-500/20">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-1.5">Pesan <span class="text-slate-600">(opsional)</span></label>
                <textarea name="message" rows="2" placeholder="Catatan tambahan untuk admin (opsional)"
                    class="neo-sm w-full bg-ink-850 px-3.5 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-brand-500/20 resize-none"></textarea>
            </div>

            <button type="submit" class="liquid-glass w-full py-3.5 text-white font-bold text-base">
                <i class="fas fa-qrcode"></i> Beli Sekarang — Bayar QRIS
            </button>
        </form>

        <a href="<%= site.whatsapp.link %>?text=<%- encodeURIComponent('Halo, saya mau tanya-tanya soal produk ' + product.name) %>" target="_blank" rel="noopener noreferrer"
            class="liquid-glass liquid-glass-green liquid-glass-flat w-full mt-3 inline-flex items-center justify-center gap-2 py-3 text-white text-sm font-bold">
            <i class="fab fa-whatsapp"></i> Tanya Dulu via WhatsApp
        </a>
    </div>
</section>

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