<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kimia Digital - Premium Digital Assets</title>
  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet">
</head>

<body>
  <main style="padding-top: 40px;">
    <div class="container" id="products">
      <h2 class="text-center mb-4" style="font-size: 32px; font-weight: 700;">Featured Products</h2>

      <div id="products-list" class="grid-products">
        <div class="text-center" style="grid-column: 1/-1; padding: 40px;">
          <div class="loading"></div> Memuat produk...
        </div>
      </div>
    </div>
  </main>

  <footer>
    <div class="container">
      <p>&copy; 2024 <span id="footer-name">Kimia Digital</span>. All rights reserved.</p>
    </div>
  </footer>

  <script>
    // Production API URL - Auto-detect based on hostname
    const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
      ? 'http://localhost:3000/api'
      : 'https://api.katalis.web.id/api';

    async function loadProducts() {
      try {
        const response = await fetch(`${API_URL}/products`);
        const result = await response.json();

        if (result.success && result.data.length > 0) {
          const container = document.getElementById('products-list');
          container.innerHTML = result.data.map(product => `
            <div class="card fade-in">
              <div style="height: 200px; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); overflow: hidden;">
                ${product.image_url
              ? `<img src="${product.image_url.startsWith('http') ? product.image_url : `https://api.katalis.web.id${product.image_url}`}" alt="${product.name}" style="width:100%; height:100%; object-fit:cover;">`
              : `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                        <polyline points="21 15 16 10 5 21"></polyline>
                       </svg>`
            }
              </div>
              <h3>${product.name}</h3>
              <p>${product.description || 'Deskripsi produk belum tersedia.'}</p>
              <div class="price">Rp ${Math.floor(product.price).toLocaleString('id-ID')}</div>
              <a href="/checkout.html#product=${product.id}" target="_blank" class="btn btn-primary btn-full">
                Beli Sekarang
              </a>
            </div>
          `).join('');
        } else {
          document.getElementById('products-list').innerHTML = `
            <div class="text-center" style="grid-column: 1/-1; color: var(--text-muted);">
              Belum ada produk yang tersedia saat ini.
            </div>`;
        }
      } catch (error) {
        console.error('Error loading products:', error);
        document.getElementById('products-list').innerHTML = `
          <div class="alert alert-error text-center" style="grid-column: 1/-1;">
            Gagal memuat produk. Pastikan server backend berjalan.
          </div>`;
      }
    }

    async function loadAppSettings() {
      try {
        const res = await fetch(`${API_URL}/products/settings`);
        const json = await res.json();
        if (json.success) {
          const { app_name, app_logo } = json.data;

          /* Update Logo */
          const logoEl = document.getElementById('logo-container');
          if (logoEl) {
            if (app_logo) {
              const logoUrl = app_logo.startsWith('http') ? app_logo : `https://api.katalis.web.id${app_logo}`;
              logoEl.innerHTML = `<img src="${logoUrl}" alt="${app_name}" style="height: 40px; vertical-align: middle;">`;
            } else {
              logoEl.textContent = app_name;
            }
          }

          /* Update Footer */
          document.getElementById('footer-name').textContent = app_name;
          document.title = `${app_name} - Premium Digital Assets`;
        }
      } catch (e) {
        console.error('Error loading settings', e);
      }
    }

    document.addEventListener('DOMContentLoaded', () => {
      loadProducts();
      loadAppSettings();
    });
  </script>
</body>

</html>