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

<section class="reveal">
    <div class="neo-flat bg-ink-900 p-6 sm:p-10 text-center sm:text-left flex flex-col sm:flex-row items-center gap-6">
        <div class="flex-1">
            <h1 class="text-heading-xl font-extrabold text-white leading-tight">
                Toko<span class="text-brand-400">Yugha</span>
            </h1>
            <p class="mt-2 text-sm sm:text-base text-slate-400 max-w-lg">
                Akun premium & digital, harga terjangkau, bayar instan pakai QRIS — tinggal scan, akun langsung diproses.
            </p>
            <div class="mt-5 flex items-center justify-center sm:justify-start gap-3">
                <a href="#produk" class="liquid-glass inline-flex items-center gap-2 px-5 py-2.5 text-white text-sm font-bold">
                    <i class="fas fa-bag-shopping"></i> Lihat Produk
                </a>
                <a href="<%= site.whatsapp.link %>" target="_blank" rel="noopener noreferrer" class="liquid-glass liquid-glass-green inline-flex items-center gap-2 px-5 py-2.5 text-white text-sm font-bold">
                    <i class="fab fa-whatsapp"></i> Chat Admin
                </a>
            </div>
        </div>
    </div>
</section>

<section id="produk" class="reveal mt-10">
    <div class="flex items-center gap-3 mb-5">
        <span class="w-1.5 h-6 rounded-full bg-brand-600"></span>
        <h2 class="text-lg sm:text-xl lg:text-2xl font-extrabold text-white">Produk Kami</h2>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
        <% products.forEach(product => { %>
            <a href="/produk/<%= product.slug %>" class="group block focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:outline-none">
                <div class="neo neo-hover bg-ink-900 overflow-hidden flex flex-col h-full">

                    <div class="relative px-5 pt-5 pb-4" style="background:linear-gradient(135deg, <%= product.accent %>26, <%= product.accent %>08);">
                        <span class="absolute top-3 right-3 neo-sm px-2.5 py-1 text-[10px] font-extrabold uppercase tracking-wide" style="background:<%= product.accent %>; color:#fff;"><%= product.badge %></span>
                        <div class="w-14 h-14 neo-sm grid place-items-center mb-3" style="background:<%= product.accent %>; color:#fff;">
                            <i class="<%= product.icon %> text-2xl"></i>
                        </div>
                        <h3 class="font-extrabold text-white text-lg leading-snug group-hover:text-brand-300 transition-colors pr-16"><%= product.name %></h3>
                        <p class="text-xs text-slate-400 font-medium mt-0.5"><%= product.short %></p>
                    </div>

                    <div class="p-5 flex flex-col flex-1">
                        <p class="text-sm text-slate-400 leading-relaxed"><%= product.description %></p>

                        <ul class="mt-4 space-y-1.5">
                            <% product.features.slice(0, 2).forEach(f => { %>
                                <li class="flex items-center gap-2 text-xs text-slate-300">
                                    <i class="fas fa-circle-check shrink-0" style="color:<%= product.accent %>;"></i> <%= f %>
                                </li>
                            <% }) %>
                        </ul>

                        <div class="flex-1"></div>

                        <div class="flex items-end justify-between mt-4 pt-4 border-t-2 border-dashed" style="border-color:var(--neo-border);opacity:.9;">
                            <div>
                                <p class="text-slate-500 text-[10px] font-semibold uppercase tracking-wide mb-0.5"><%= product.guarantee %></p>
                                <p><span class="text-white font-extrabold text-xl">Rp<%= product.price.toLocaleString('id-ID') %></span> <span class="text-slate-500 text-xs"><%= product.unit %></span></p>
                            </div>
                            <span class="neo-sm neo-hover neo-press shrink-0 grid place-items-center w-10 h-10 text-white transition-transform group-hover:translate-x-0.5" style="background:<%= product.accent %>;">
                                <i class="fas fa-arrow-right text-sm"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </a>
        <% }) %>
    </div>
</section>

<section class="reveal mt-10">
    <div class="flex items-center gap-3 mb-5">
        <span class="w-1.5 h-6 rounded-full bg-brand-600"></span>
        <h2 class="text-lg sm:text-xl lg:text-2xl font-extrabold text-white">Cara Pemesanan</h2>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="neo-flat bg-ink-900 p-5">
            <div class="w-9 h-9 neo-sm bg-ink-800 grid place-items-center text-brand-400 font-bold mb-3">1</div>
            <p class="text-sm text-slate-300">Pilih produk yang kamu mau, lalu klik <b class="text-white">Beli Sekarang</b>.</p>
        </div>
        <div class="neo-flat bg-ink-900 p-5">
            <div class="w-9 h-9 neo-sm bg-ink-800 grid place-items-center text-brand-400 font-bold mb-3">2</div>
            <p class="text-sm text-slate-300">Scan kode QRIS yang muncul, bayar sesuai nominal.</p>
        </div>
        <div class="neo-flat bg-ink-900 p-5">
            <div class="w-9 h-9 neo-sm bg-ink-800 grid place-items-center text-brand-400 font-bold mb-3">3</div>
            <p class="text-sm text-slate-300">Pembayaran terverifikasi otomatis, admin kirim akun via WhatsApp/Telegram.</p>
        </div>
    </div>
</section>

    </div>
</section>

<% if (testimonials && testimonials.length) { %>
<section class="reveal mt-10">
    <div class="flex items-center gap-3 mb-5">
        <span class="w-1.5 h-6 rounded-full bg-brand-600"></span>
        <h2 class="text-lg sm:text-xl lg:text-2xl font-extrabold text-white">Kata Pembeli</h2>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <% testimonials.forEach(t => { %>
            <div class="neo-flat bg-ink-900 p-5">
                <div class="flex items-center justify-between mb-3 gap-2">
                    <div class="flex items-center gap-0.5 text-amber-400 text-xs">
                        <% for (let i = 0; i < 5; i++) { %>
                            <i class="<%= i < t.rating ? 'fas' : 'far' %> fa-star"></i>
                        <% } %>
                    </div>
                    <span class="neo-sm px-2 py-1 text-[10px] font-bold bg-emerald-500/15 text-emerald-300 whitespace-nowrap">
                        <i class="fas fa-circle-check"></i> Pembelian Terverifikasi
                    </span>
                </div>
                <p class="text-sm text-slate-300 leading-relaxed mb-3">&ldquo;<%= t.comment %>&rdquo;</p>
                <p class="text-xs text-slate-500 font-semibold"><%= t.name %> &middot; <%= t.productName %></p>
            </div>
        <% }) %>
    </div>
</section>
<% } %>

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