<section class="mx-auto max-w-7xl px-6 py-10">
  <a href="/" class="text-sm text-muted hover:text-white inline-flex items-center gap-2 mb-6">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
    Kembali ke katalog
  </a>

  <div class="grid gap-6 lg:grid-cols-[1.3fr_.9fr]">
    <div class="card p-7">
      <div class="flex items-center justify-between">
        <span class="pill pill-gold"><%= ea.code %></span>
        <span class="text-sm text-muted"><%= ea.pair || '' %></span>
      </div>
      <h1 class="mt-5 text-4xl font-display font-semibold tracking-tight"><%= ea.name %></h1>
      <p class="mt-4 text-lg leading-7 text-muted"><%= ea.tagline %></p>

      <% if (ea.description) { %>
        <div class="mt-7 prose prose-invert max-w-none text-white/80 leading-7">
          <%- ea.description.replace(/\n/g,'<br>') %>
        </div>
      <% } %>

      <div class="mt-7 grid grid-cols-2 gap-3">
        <div class="stat"><div class="stat-label">Profit Pantau</div><div class="stat-value text-gold-200"><%= ea.watch_profit || '-' %></div></div>
        <div class="stat"><div class="stat-label">DD Max</div><div class="stat-value"><%= ea.dd_max || '-' %></div></div>
      </div>

      <% if ((ea.features||[]).length) { %>
        <div class="mt-7">
          <div class="text-sm text-muted mb-3">Fitur</div>
          <div class="flex flex-wrap gap-2">
            <% ea.features.forEach(function(f){ %><span class="pill"><%= f %></span><% }); %>
          </div>
        </div>
      <% } %>
    </div>

    <aside class="card p-6 lg:sticky lg:top-6 lg:h-fit">
      <div class="text-sm text-muted">Harga</div>
      <div class="text-3xl font-display font-semibold text-gold-200 mt-1"><%= ea.price_label || ('Rp' + Number(ea.price).toLocaleString('id-ID')) %></div>

      <div class="mt-6 space-y-3 text-sm text-white/75">
        <% ['Akun pantau real & laporan backtest','Download EA langsung dari member area','Auto email setelah admin approve','Support instalasi & setting awal'].forEach(function(item){ %>
          <div class="flex items-center gap-3">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 text-gold-300"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
            <%= item %>
          </div>
        <% }); %>
      </div>

      <% if (user) { %>
        <a href="/checkout/<%= ea.slug %>" class="btn btn-gold mt-7 h-12 w-full rounded-full">
          Beli <%= ea.code %> Sekarang
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2 2h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57L22 7H5.12"/></svg>
        </a>
      <% } else { %>
        <a href="/auth/login?redirect=/ea/<%= ea.slug %>" class="btn btn-gold mt-7 h-12 w-full rounded-full">
          Login untuk Beli
        </a>
        <a href="/auth/register" class="btn btn-outline mt-3 h-11 w-full rounded-full">Belum punya akun? Daftar</a>
      <% } %>

      <!-- Tanya admin: WA + Telegram, label saja -->
      <% if (settings && (settings.whatsapp_admin || settings.telegram_admin)) { %>
        <div class="mt-4 pt-4 border-t border-white/5">
          <div class="text-xs text-muted-2 mb-2.5">Tanya admin tentang EA ini:</div>
          <div class="flex gap-2">
            <% if (settings.whatsapp_admin) { %>
              <a href="https://wa.me/<%= settings.whatsapp_admin %>?text=Halo,%20saya%20mau%20tanya%20tentang%20EA%20<%= ea.code %>"
                 target="_blank" rel="noopener"
                 class="flex-1 btn btn-outline rounded-full py-2.5 text-sm gap-2">
                <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 text-emerald-300"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413"/></svg>
                <span>WhatsApp</span>
              </a>
            <% } %>
            <% if (settings.telegram_admin) { %>
              <% let tgUser = String(settings.telegram_admin).replace(/^@/, ''); %>
              <a href="https://t.me/<%= tgUser %>" target="_blank" rel="noopener"
                 class="flex-1 btn btn-outline rounded-full py-2.5 text-sm gap-2">
                <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 text-sky-300"><path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0Zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295l.213-3.053 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.643.135-.953l11.566-4.458c.538-.196 1.006.128.832.938Z"/></svg>
                <span>Telegram</span>
              </a>
            <% } %>
          </div>
        </div>
      <% } %>
    </aside>
  </div>
</section>
