<div class="flex items-start sm:items-center justify-between flex-wrap gap-4 mb-7 sm:mb-8">
  <div class="min-w-0">
    <div class="text-xs sm:text-sm text-muted">Selamat datang kembali,</div>
    <h1 class="text-2xl sm:text-3xl font-display font-semibold mt-1 truncate"><%= user.name %> 👋</h1>
  </div>
  <span class="pill <%= user.is_ib ? 'pill-gold' : '' %>"><%= user.is_ib ? '⭐ IB AKTIF' : 'Member' %></span>
</div>

<!-- Stats -->
<div class="grid grid-cols-3 gap-3 sm:gap-4 mb-6 sm:mb-8">
  <div class="stat">
    <div class="stat-label">Total Pesanan</div>
    <div class="stat-value"><%= stats.total %></div>
  </div>
  <div class="stat">
    <div class="stat-label">EA Aktif</div>
    <div class="stat-value text-gold-300"><%= stats.approved %></div>
  </div>
  <div class="stat">
    <div class="stat-label">Pending</div>
    <div class="stat-value"><%= stats.pending %></div>
  </div>
</div>

<!-- Quick actions -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6 sm:mb-8">
  <a href="/" class="card card-hover p-4 sm:p-5">
    <div class="grid h-10 w-10 place-items-center rounded-xl bg-gold-300/10 text-gold-300 mb-3">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path d="m7.5 4.27 9 5.15"/><path d="M21 8 12 13 3 8"/><path d="M3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8"/></svg>
    </div>
    <div class="font-medium text-sm">Beli EA Baru</div>
    <div class="text-xs text-muted mt-0.5">Browse katalog</div>
  </a>
  <a href="/member/orders" class="card card-hover p-4 sm:p-5">
    <div class="grid h-10 w-10 place-items-center rounded-xl bg-gold-300/10 text-gold-300 mb-3">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v6h6"/></svg>
    </div>
    <div class="font-medium text-sm">Pesanan</div>
    <div class="text-xs text-muted mt-0.5">Cek status</div>
  </a>
  <a href="/member/downloads" class="card card-hover p-4 sm:p-5">
    <div class="grid h-10 w-10 place-items-center rounded-xl bg-gold-300/10 text-gold-300 mb-3">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>
    </div>
    <div class="font-medium text-sm">Download</div>
    <div class="text-xs text-muted mt-0.5"><%= stats.approved %> EA siap</div>
  </a>
  <a href="/member/profile" class="card card-hover p-4 sm:p-5">
    <div class="grid h-10 w-10 place-items-center rounded-xl bg-gold-300/10 text-gold-300 mb-3">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>
    </div>
    <div class="font-medium text-sm">Profil</div>
    <div class="text-xs text-muted mt-0.5">Edit data</div>
  </a>
</div>

<div class="grid lg:grid-cols-[1.4fr_1fr] gap-5 sm:gap-6">
  <!-- Recent orders -->
  <div class="card p-5 sm:p-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-base sm:text-lg font-display font-semibold">Pesanan Terbaru</h2>
      <a href="/member/orders" class="text-sm text-gold-300 hover:text-gold-200">Semua →</a>
    </div>
    <% if (recent && recent.length) { %>
      <div class="space-y-3">
        <% recent.forEach(function(o){ %>
          <div class="flex items-center justify-between gap-3 pb-3 border-b border-white/5 last:border-0 last:pb-0">
            <div class="min-w-0 flex-1">
              <div class="font-medium text-sm truncate"><%= o.ea_name %></div>
              <div class="text-xs text-muted mt-0.5 mono"><%= o.code %> • <%= new Date(o.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric'}) %></div>
            </div>
            <span class="pill <%= o.status==='approved' ? 'pill-green' : (o.status==='pending' ? 'pill-gold' : 'pill-red') %> shrink-0">
              <%= o.status.toUpperCase() %>
            </span>
          </div>
        <% }); %>
      </div>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-icon">📦</div>
        <h2>Belum ada pesanan</h2>
        <p>Browse katalog EA & order pertama Anda.</p>
        <a href="/" class="btn btn-gold rounded-full px-5 h-10 inline-flex text-sm">Lihat Katalog →</a>
      </div>
    <% } %>
  </div>

  <!-- Monitor accounts -->
  <div class="card p-5 sm:p-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-base sm:text-lg font-display font-semibold">Akun Pantau</h2>
      <a href="/#pantau" class="text-sm text-gold-300 hover:text-gold-200">Semua →</a>
    </div>
    <% if (monitors && monitors.length) { %>
      <div class="space-y-3">
        <% monitors.slice(0,4).forEach(function(m){ %>
          <div class="card-soft p-3 sm:p-4">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0 flex-1">
                <div class="font-medium text-sm truncate"><%= m.title %></div>
                <% if (m.server || m.account_number) { %>
                  <div class="text-xs text-muted mt-1 mono truncate">
                    <%= m.server || '' %><% if (m.account_number) { %> • #<%= m.account_number %><% } %>
                  </div>
                <% } %>
              </div>
              <div class="text-gold-200 font-medium text-sm shrink-0"><%= m.profit || '' %></div>
            </div>
          </div>
        <% }); %>
      </div>
      <a href="/#pantau" class="block text-center text-xs text-gold-300 hover:text-gold-200 mt-4 pt-3 border-t border-white/5">Lihat password investor di homepage →</a>
    <% } else { %>
      <p class="text-sm text-muted text-center py-6">Belum ada akun pantau.</p>
    <% } %>
  </div>
</div>
