<%- include('partials/head', { pageTitle: settings.storeName + ' - ' + settings.tagline }) %>
<div class="app-container">
  <%- include('partials/header', { settings, activePage, currentUser }) %>

  <!-- ===== HERO CAROUSEL ===== -->
  <div class="hero-carousel">
    <div class="hero-slide-track" id="heroTrack">
      <div class="hero-slide has-banner-image" style="background-image: url('<%= settings.heroImage %>');">
        <div class="hero-slide-header">
          <img src="<%= settings.logo %>" alt="" class="hero-slide-icon" onerror="this.style.display='none'">
          <div class="hero-slide-title">
            <%= settings.heroTitle %> <span class="accent" style="color:var(--gold-primary);"><%= settings.heroSubtitle %></span>
          </div>
        </div>
        <p class="hero-slide-desc">
          Kami sudah beroperasi di market selama <b>bertahun-tahun</b>, menyediakan key premium untuk mod game dan aplikasi dengan performa tinggi, stabil, dan <b>support nyata</b>. Kualitas, inovasi, dan kepercayaan dalam satu tempat.
        </p>
      </div>
      <div class="hero-slide">
        <div class="hero-slide-header">
          <div class="hero-slide-title">
            <i class="fa-solid fa-bolt" style="color: var(--gold-primary);"></i> Instant Key Delivery
          </div>
        </div>
        <p class="hero-slide-desc">
          Beli sekarang, key langsung otomatis terkirim ke akun kamu dalam hitungan detik setelah pembayaran sukses. Tidak perlu menunggu admin.
        </p>
      </div>
      <div class="hero-slide">
        <div class="hero-slide-header">
          <div class="hero-slide-title">
            <i class="fa-solid fa-shield-halved" style="color: var(--gold-primary);"></i> Pembayaran Aman & Terpercaya
          </div>
        </div>
        <p class="hero-slide-desc">
          Transaksi dienkripsi dan diproses melalui payment gateway terpercaya. Ribuan customer sudah membuktikan keamanan dan kecepatan layanan kami.
        </p>
      </div>
    </div>

    <button class="hero-arrow prev" onclick="heroSlide(-1)"><i class="fa-solid fa-chevron-left"></i></button>
    <button class="hero-arrow next" onclick="heroSlide(1)"><i class="fa-solid fa-chevron-right"></i></button>

    <div class="hero-dots" id="heroDots"></div>
  </div>

  <!-- ===== AVAILABLE PRODUCTS LABEL ===== -->
  <div class="section-label">
    <span class="status-dot"></span> Our Products
  </div>

  <!-- ===== FILTER TABS ===== -->
  <form id="searchForm" action="/" method="GET">
    <div class="search-box">
      <input type="text" name="search" placeholder="Cari produk..." value="<%= searchQuery %>">
    </div>
  </form>

  <div class="filter-bar">
    <a href="/?category=all" class="filter-tab <%= activeCategory === 'all' ? 'active' : '' %>">All</a>
    <% categories.forEach(cat => { %>
      <a href="/?category=<%= encodeURIComponent(cat) %>" class="filter-tab <%= activeCategory === cat ? 'active' : '' %>"><%= cat %></a>
    <% }) %>
  </div>

  <!-- ===== PRODUCT GRID V2 ===== -->
  <% if (products.length === 0) { %>
    <div class="empty-state">
      <i class="fa-solid fa-box-open"></i>
      <p>Tidak ada produk ditemukan</p>
    </div>
  <% } else { %>
    <div class="product-grid-v2">
      <% products.forEach(product => { %>
        <div class="product-card-v2">
          <div class="product-card-v2-head">
            <img src="<%= product.icon %>" alt="" class="product-card-v2-icon" onerror="this.style.visibility='hidden'">
            <div class="product-card-v2-titlewrap">
              <div class="product-card-v2-name"><%= product.name %> <i class="fa-solid fa-circle-check verified"></i></div>
              <div class="product-card-v2-rating">
                <i class="fa-solid fa-star star"></i> <%= product.rating.toFixed(1) %> (<%= product.soldCount %>)
              </div>
            </div>
          </div>

          <img src="<%= product.icon %>" alt="<%= product.name %>" class="product-card-v2-poster" onerror="this.style.display='none'">

          <div class="product-card-v2-body">
            <div class="status-row">
              <% if (product.status === 'online') { %>
                <span class="status-pill online"><span class="status-pill-dot"></span> Online</span>
              <% } else if (product.status === 'offline') { %>
                <span class="status-pill offline"><span class="status-pill-dot"></span> Offline</span>
              <% } else { %>
                <span class="status-pill unknown"><span class="status-pill-dot"></span> Unknown</span>
              <% } %>
            </div>

            <p class="product-card-v2-desc"><%= product.description %></p>
            <% if (product.badge) { %>
              <span class="product-card-v2-tag"><i class="fa-solid fa-tag"></i> <%= product.badge %></span>
            <% } %>
            <div class="product-card-v2-price">
              From <b>Rp <%= product.lowestPrice.toLocaleString('id-ID') %></b>
            </div>

            <% if (product.status === 'offline') { %>
              <div class="product-card-v2-actions">
                <% if (product.tutorialUrl) { %>
                  <a href="<%= product.tutorialUrl %>" target="_blank" rel="noopener" class="btn-tutorial-v2" title="Cara Download Mod">
                    <i class="fa-brands fa-tiktok"></i>
                  </a>
                <% } %>
                <button class="btn-buy-v2" disabled><i class="fa-solid fa-triangle-exclamation"></i> Sedang Maintain</button>
              </div>
            <% } else if (product.totalStock <= 0) { %>
              <div class="product-card-v2-actions">
                <% if (product.tutorialUrl) { %>
                  <a href="<%= product.tutorialUrl %>" target="_blank" rel="noopener" class="btn-tutorial-v2" title="Cara Download Mod">
                    <i class="fa-brands fa-tiktok"></i>
                  </a>
                <% } %>
                <button class="btn-buy-v2" disabled><i class="fa-solid fa-ban"></i> Stok Habis</button>
              </div>
            <% } else { %>
              <div class="product-card-v2-actions">
                <% if (product.tutorialUrl) { %>
                  <a href="<%= product.tutorialUrl %>" target="_blank" rel="noopener" class="btn-tutorial-v2" title="Cara Download Mod">
                    <i class="fa-brands fa-tiktok"></i>
                  </a>
                <% } %>
                <button class="btn-buy-v2" onclick="openBuyModal('<%= product.id %>')">
                  <i class="fa-solid fa-cart-shopping"></i> Buy
                </button>
              </div>
            <% } %>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>

  <!-- ===== REVIEWS SECTION ===== -->
  <div class="reviews-section">
    <div class="reviews-header">
      <div class="reviews-title"><i class="fa-solid fa-comment"></i> What Our Customers Say</div>
      <div class="reviews-meta">
        <span class="review-badge rating"><i class="fa-solid fa-star"></i> <%= reviewStats.avgRating %></span>
        <span class="review-badge count"><i class="fa-solid fa-users"></i> <%= reviewStats.totalCount %></span>
      </div>
    </div>

    <div class="review-scroll">
      <% reviews.forEach(review => { %>
        <div class="review-card">
          <div class="review-card-top">
            <span class="review-card-rating"><i class="fa-solid fa-star"></i> <%= review.rating.toFixed(1) %></span>
            <span class="review-card-time"><%= review.time %></span>
          </div>
          <div class="review-card-product"><i class="fa-solid fa-tag"></i> <%= review.product %></div>
          <p class="review-card-text">"<%= review.text %>"</p>
          <div class="review-card-bottom">
            <div class="review-author">
              <div class="review-avatar"><%= review.name.charAt(0).toUpperCase() %></div>
              <div class="review-author-name">
                <%= review.name %>
                <% if (review.verified) { %><i class="fa-solid fa-circle-check verified"></i><% } %>
              </div>
            </div>
            <i class="fa-solid fa-thumbs-up" style="color: var(--text-muted); font-size:12px;"></i>
          </div>
        </div>
      <% }) %>
    </div>

    <% if (reviews.length > 0) { %>
      <button type="button" class="show-all-reviews-btn" onclick="openAllReviewsModal()">
        Show all reviews <i class="fa-solid fa-chevron-right"></i>
      </button>
    <% } %>
  </div>

  <!-- ===== MODAL: ALL CUSTOMER REVIEWS (breakdown bintang) ===== -->
  <div class="modal-overlay" id="allReviewsModal">
    <div class="modal-box all-reviews-modal-box">
      <div class="modal-header">
        <div class="modal-title"><i class="fa-solid fa-star" style="color: var(--gold-primary);"></i> All Customer Reviews</div>
        <button class="modal-close" onclick="closeAllReviewsModal()"><i class="fa-solid fa-xmark"></i></button>
      </div>

      <div class="all-reviews-summary">
        <div class="all-reviews-avg-score"><%= reviewStats.avgRating.toFixed(1) %> <i class="fa-solid fa-star"></i></div>
        <div class="all-reviews-label">
          <% if (reviewStats.avgRating >= 4.5) { %>Excellent
          <% } else if (reviewStats.avgRating >= 3.5) { %>Good
          <% } else if (reviewStats.avgRating >= 2.5) { %>Average
          <% } else { %>Needs Improvement<% } %>
        </div>
        <div class="all-reviews-count"><%= reviewStats.totalCount %> reviews</div>

        <% [5,4,3,2,1].forEach(star => { %>
          <div class="rating-breakdown-row">
            <span class="rating-breakdown-star"><%= star %> <i class="fa-solid fa-star" style="color:var(--gold-primary); font-size:10px;"></i></span>
            <div class="rating-breakdown-bar-track">
              <div class="rating-breakdown-bar-fill" style="width: <%= reviewStats.breakdownPercent[star] %>%;"></div>
            </div>
            <span class="rating-breakdown-num"><%= reviewStats.breakdown[star] %></span>
          </div>
        <% }) %>
      </div>

      <div class="all-reviews-list">
        <% if (reviews.length === 0) { %>
          <div class="empty-state" style="padding:30px 0;">
            <i class="fa-solid fa-comment-slash"></i>
            <p>Belum ada review</p>
          </div>
        <% } %>
        <% reviews.forEach(review => { %>
          <div class="all-review-item">
            <div class="all-review-item-top">
              <div class="all-review-author-row">
                <div class="review-avatar"><%= review.name.charAt(0).toUpperCase() %></div>
                <div>
                  <div class="all-review-name">
                    <%= review.name %>
                    <% if (review.verified) { %><i class="fa-solid fa-circle-check verified"></i><% } %>
                  </div>
                  <div class="all-review-time">Verified Buyer &bull; <%= review.time %></div>
                </div>
              </div>
              <span class="table-badge success" style="font-size:11px;"><%= review.rating.toFixed(1) %> <i class="fa-solid fa-star"></i></span>
            </div>
            <div class="review-card-product"><i class="fa-solid fa-tag"></i> <%= review.product %></div>
            <p class="review-card-text" style="margin-top:6px; margin-bottom:0;">"<%= review.text %>"</p>
          </div>
        <% }) %>
      </div>
    </div>
  </div>

  <!-- ===== WHY CHOOSE US SECTION ===== -->
  <div class="why-choose-section">
    <h2 class="why-choose-title">Why Choose <span class="accent"><%= settings.storeName.split(' ')[0] %></span>?</h2>
    <p class="why-choose-subtitle">Trusted by thousands of customers worldwide for premium quality and instant delivery</p>

    <% if (settings.youtube) { %>
      <a href="<%= settings.youtube %>" target="_blank" rel="noopener" style="text-decoration:none;">
        <div class="promo-video-card">
          <div class="promo-video-header">
            <img src="<%= settings.logo %>" alt="" class="promo-video-avatar" onerror="this.style.display='none'">
            <div>
              <div class="promo-video-title">Promo <%= settings.storeName %></div>
              <div class="promo-video-sub"><%= settings.storeName %> Official</div>
            </div>
          </div>
          <div class="promo-video-thumb">
            <div class="promo-video-play"><i class="fa-solid fa-play"></i></div>
          </div>
          <div class="promo-video-footer">Tonton di <i class="fa-brands fa-youtube" style="margin: 0 4px; color:#ff0000;"></i> YouTube</div>
        </div>
      </a>
    <% } %>

    <div class="feature-grid">
      <div class="feature-card">
        <div class="feature-icon"><i class="fa-solid fa-bolt"></i></div>
        <div class="feature-title">Instant Delivery</div>
        <div class="feature-desc">Get your keys delivered automatically within seconds after payment</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon"><i class="fa-solid fa-headset"></i></div>
        <div class="feature-title">24/7 Support</div>
        <div class="feature-desc">Our team is always available to help you with any questions</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon"><i class="fa-solid fa-shield-halved"></i></div>
        <div class="feature-title">100% Secure</div>
        <div class="feature-desc">Safe & encrypted payments with verified delivery system</div>
      </div>
    </div>
  </div>

  <%- include('partials/footer', { settings }) %>
</div>

<!-- ===== FLOATING CUSTOMER SERVICE BUTTON ===== -->
<% if (settings.csWhatsappLink) { %>
  <a href="<%= settings.csWhatsappLink %>" target="_blank" rel="noopener" class="cs-float-btn" title="Hubungi Customer Service">
    <i class="fa-brands fa-whatsapp"></i>
  </a>
<% } %>

<!-- ===== POPUP INFORMASI (channel mod, dll) - tampil sekali per sesi browser ===== -->
<% if (settings.popupEnabled && settings.popupChannelLink) { %>
<div class="modal-overlay" id="infoPopup">
  <div class="modal-box info-popup-box">
    <button class="modal-close info-popup-close" onclick="closeInfoPopup()"><i class="fa-solid fa-xmark"></i></button>
    <div class="info-popup-icon"><i class="fa-brands fa-whatsapp"></i></div>
    <h3 class="info-popup-title"><%= settings.popupTitle %></h3>
    <p class="info-popup-message"><%= settings.popupMessage %></p>
    <a href="<%= settings.popupChannelLink %>" target="_blank" rel="noopener" class="btn-full-gold" style="display:flex; margin-top:18px;" onclick="closeInfoPopup()">
      <i class="fa-brands fa-whatsapp"></i> <%= settings.popupChannelLabel %>
    </a>
    <button class="btn-back-step" style="margin-top:10px;" onclick="closeInfoPopup()">Nanti Saja</button>
  </div>
</div>
<% } %>

<!-- ===== MULTI-STEP BUY MODAL ===== -->
<div class="modal-overlay" id="buyModal">
  <div class="modal-box">
    <div class="modal-header">
      <div class="modal-title"><i class="fa-solid fa-cart-shopping"></i> <span id="modalProductName">Produk</span></div>
      <button class="modal-close" onclick="closeBuyModal()"><i class="fa-solid fa-xmark"></i></button>
    </div>

    <div class="step-indicator">
      <div class="step-dot active" id="stepDot1">1</div>
      <div class="step-line"></div>
      <div class="step-dot" id="stepDot2">2</div>
      <div class="step-line"></div>
      <div class="step-dot" id="stepDot3">3</div>
    </div>

    <div class="modal-body">
      <!-- STEP 1: Pilih varian & quantity -->
      <div class="step-panel active" id="stepPanel1">
        <div class="form-group">
          <label class="form-label"><i class="fa-solid fa-list"></i> Pilih Durasi</label>
          <select class="option-select" id="variantSelect" onchange="onVariantChange()">
            <option value="">Memuat...</option>
          </select>
        </div>

        <div class="form-group">
          <label class="form-label"><i class="fa-solid fa-cart-plus"></i> Quantity</label>
          <div class="qty-control" style="width:100%; justify-content:space-between;">
            <span style="font-size:13px; color:var(--text-secondary); padding-left:8px;">How many?</span>
            <div style="display:flex; align-items:center; gap:12px;">
              <button class="qty-btn" onclick="changeQty(-1)">-</button>
              <span class="qty-value" id="qtyValue">1</span>
              <button class="qty-btn" onclick="changeQty(1)">+</button>
            </div>
          </div>
        </div>

        <div class="stock-info-row">
          <div>
            <div class="stock-info-label" id="stockInfoLabel">0 in stock</div>
          </div>
          <div class="stock-info-price" id="stockInfoPrice">Rp 0</div>
        </div>

        <button class="btn-continue" id="continueBtn" onclick="goToStep(2)">
          <i class="fa-solid fa-arrow-right"></i> Continue
        </button>
      </div>

      <!-- STEP 2: Data diri -->
      <div class="step-panel" id="stepPanel2">
        <div class="order-summary-box">
          <div class="summary-row"><span id="summaryProductName">-</span><span id="summaryQty">x1</span></div>
          <div class="summary-row total"><span>Total</span><span class="gold" id="summaryTotal">Rp 0</span></div>
        </div>

        <div class="form-group">
          <label class="form-label"><i class="fa-solid fa-user"></i> Nama Anda</label>
          <input type="text" id="customerName" class="form-input" placeholder="John Doe" value="<%= currentUser ? currentUser.name : '' %>">
        </div>

        <div class="form-group">
          <label class="form-label"><i class="fa-solid fa-envelope"></i> Email Pengiriman</label>
          <input type="email" id="customerEmail" class="form-input" placeholder="email@example.com" value="<%= currentUser ? currentUser.email : '' %>">
        </div>

        <button class="btn-continue" id="checkoutBtn" onclick="submitCheckout()">
          <i class="fa-solid fa-credit-card"></i> Bayar Sekarang
        </button>
        <button class="btn-back-step" onclick="goToStep(1)"><i class="fa-solid fa-arrow-left"></i> Kembali</button>
      </div>

      <!-- STEP 3: Redirect ke payment -->
      <div class="step-panel" id="stepPanel3">
        <div style="text-align:center; padding: 20px 0;">
          <div class="spinner" style="margin: 0 auto 16px; width:32px; height:32px; border-width:3px; border-color: rgba(255,215,0,0.2); border-top-color: var(--gold-primary);"></div>
          <p style="font-size:13px; color:var(--text-secondary);">Menyiapkan halaman pembayaran...</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="toast" id="toast"></div>

<script>
  var currentProduct = null;
  var currentVariant = null;
  var currentQty = 1;

  var heroSlides = document.querySelectorAll('#heroTrack .hero-slide');
  var heroIndex = 0;
  var heroDotsContainer = document.getElementById('heroDots');

  heroSlides.forEach(function(_, i) {
    var dot = document.createElement('div');
    dot.className = 'hero-dot' + (i === 0 ? ' active' : '');
    dot.onclick = function() { heroIndex = i; updateHero(); };
    heroDotsContainer.appendChild(dot);
  });

  function updateHero() {
    document.getElementById('heroTrack').style.transform = 'translateX(-' + (heroIndex * 100) + '%)';
    document.querySelectorAll('.hero-dot').forEach(function(d, i) { d.classList.toggle('active', i === heroIndex); });
  }

  function heroSlide(dir) {
    heroIndex = (heroIndex + dir + heroSlides.length) % heroSlides.length;
    updateHero();
  }

  setInterval(function() { heroSlide(1); }, 6000);

  // ===== POPUP INFORMASI - tampil sekali per sesi browser (sessionStorage) =====
  (function() {
    var popup = document.getElementById('infoPopup');
    if (!popup) return;

    var alreadyShown = sessionStorage.getItem('buzzmart-popup-shown');
    if (!alreadyShown) {
      setTimeout(function() {
        popup.classList.add('show');
        sessionStorage.setItem('buzzmart-popup-shown', '1');
      }, 800);
    }
  })();

  function closeInfoPopup() {
    document.getElementById('infoPopup').classList.remove('show');
  }

  function showToast(message, isError) {
    var toast = document.getElementById('toast');
    toast.innerHTML = '<i class="fa-solid ' + (isError ? 'fa-circle-exclamation' : 'fa-circle-check') + '"></i> ' + message;
    toast.className = 'toast show' + (isError ? ' error' : '');
    setTimeout(function() { toast.classList.remove('show'); }, 3000);
  }

  function formatRupiah(num) {
    return 'Rp ' + num.toLocaleString('id-ID');
  }

  function openBuyModal(productId) {
    fetch('/api/product/' + productId)
      .then(function(res) { return res.json(); })
      .then(function(data) {
        if (!data.success) {
          showToast(data.message || 'Produk tidak ditemukan', true);
          return;
        }

        currentProduct = data.product;
        currentQty = 1;

        document.getElementById('modalProductName').textContent = currentProduct.name;

        var select = document.getElementById('variantSelect');
        select.innerHTML = '';
        currentProduct.variants.forEach(function(v) {
          var opt = document.createElement('option');
          opt.value = v.id;
          opt.textContent = v.label + ' - ' + formatRupiah(v.price) + (v.stockAvailable <= 0 ? ' (Stok Habis)' : '');
          opt.disabled = v.stockAvailable <= 0;
          select.appendChild(opt);
        });

        var firstAvailable = currentProduct.variants.find(function(v) { return v.stockAvailable > 0; });
        if (firstAvailable) select.value = firstAvailable.id;

        onVariantChange();
        goToStep(1);
        document.getElementById('buyModal').classList.add('show');
      })
      .catch(function() {
        showToast('Gagal memuat produk', true);
      });
  }

  function onVariantChange() {
    var select = document.getElementById('variantSelect');
    currentVariant = currentProduct.variants.find(function(v) { return v.id === select.value; });
    currentQty = 1;
    document.getElementById('qtyValue').textContent = currentQty;
    updateStockPriceDisplay();
  }

  function closeBuyModal() {
    document.getElementById('buyModal').classList.remove('show');
  }

  function openAllReviewsModal() {
    document.getElementById('allReviewsModal').classList.add('show');
  }

  function closeAllReviewsModal() {
    document.getElementById('allReviewsModal').classList.remove('show');
  }

  function changeQty(delta) {
    if (!currentVariant) return;
    var newQty = currentQty + delta;
    if (newQty < 1) return;
    if (newQty > currentVariant.stockAvailable) {
      showToast('Stok tidak cukup untuk varian ini', true);
      return;
    }
    currentQty = newQty;
    document.getElementById('qtyValue').textContent = currentQty;
    updateStockPriceDisplay();
  }

  function updateStockPriceDisplay() {
    if (!currentVariant) return;
    document.getElementById('stockInfoLabel').textContent = currentVariant.stockAvailable + ' in stock';
    document.getElementById('stockInfoPrice').textContent = formatRupiah(currentVariant.price * currentQty);
  }

  function goToStep(step) {
    if (step === 2 && (!currentVariant || currentVariant.stockAvailable <= 0)) {
      showToast('Pilih varian yang masih memiliki stok', true);
      return;
    }

    document.querySelectorAll('.step-panel').forEach(function(p) { p.classList.remove('active'); });
    document.getElementById('stepPanel' + step).classList.add('active');

    for (var i = 1; i <= 3; i++) {
      var dot = document.getElementById('stepDot' + i);
      dot.classList.remove('active', 'done');
      if (i < step) dot.classList.add('done');
      if (i === step) dot.classList.add('active');
    }

    if (step === 2) {
      document.getElementById('summaryProductName').textContent = currentProduct.name + ' (' + currentVariant.label + ')';
      document.getElementById('summaryQty').textContent = 'x' + currentQty;
      document.getElementById('summaryTotal').textContent = formatRupiah(currentVariant.price * currentQty);
    }
  }

  function submitCheckout() {
    var customerName = document.getElementById('customerName').value.trim();
    var customerEmail = document.getElementById('customerEmail').value.trim();

    if (!customerName || !customerEmail) {
      showToast('Nama dan email wajib diisi', true);
      return;
    }

    var btn = document.getElementById('checkoutBtn');
    btn.disabled = true;
    btn.innerHTML = '<div class="spinner"></div> Memproses...';

    fetch('/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: currentProduct.id,
        variantId: currentVariant.id,
        qty: currentQty,
        customerName: customerName,
        email: customerEmail
      })
    })
      .then(function(res) { return res.json(); })
      .then(function(data) {
        if (!data.success) {
          showToast(data.message || 'Checkout gagal', true);
          btn.disabled = false;
          btn.innerHTML = '<i class="fa-solid fa-credit-card"></i> Bayar Sekarang';
          return;
        }

        goToStep(3);
        setTimeout(function() {
          window.location.href = data.paymentUrl;
        }, 800);
      })
      .catch(function() {
        showToast('Terjadi kesalahan, coba lagi', true);
        btn.disabled = false;
        btn.innerHTML = '<i class="fa-solid fa-credit-card"></i> Bayar Sekarang';
      });
  }
</script>
</body>
</html>
