<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Pengumuman & Promo</h1>
  <p class="text-muted text-sm mt-1">Update terbaru, promo aktif, dan tutorial video dari tim Trader Rebahan.</p>
</div>

<% if (!announcements || announcements.length === 0) { %>
  <div class="card empty-state">
    <div class="empty-icon">📢</div>
    <h2>Tidak ada pengumuman aktif</h2>
    <p>Kembali lagi nanti untuk info terbaru.</p>
  </div>
<% } else { %>
  <%
    function youtubeEmbedId(url) {
      if (!url) return null;
      const m = url.match(/(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?/\s]{11})/);
      return m ? m[1] : null;
    }
    function tiktokEmbedId(url) {
      if (!url) return null;
      const m = url.match(/tiktok\.com\/.+\/video\/(\d+)/);
      return m ? m[1] : null;
    }
  %>
  <div class="space-y-5">
    <% announcements.forEach(function(a){ %>
      <div class="card overflow-hidden">
        <% if (a.banner_path) { %>
          <div class="aspect-[16/7] sm:aspect-[16/5] bg-black/30 relative overflow-hidden">
            <img src="<%= a.banner_path %>" alt="<%= a.title %>" class="w-full h-full object-cover">
            <% if (a.badge) { %>
              <div class="absolute top-4 left-4">
                <span class="pill pill-gold text-xs px-3 py-1.5 backdrop-blur-md bg-gold-300/90 text-black font-semibold"><%= a.badge %></span>
              </div>
            <% } %>
          </div>
        <% } %>

        <div class="p-5 sm:p-6">
          <% if (!a.banner_path && a.badge) { %>
            <div class="mb-3"><span class="pill pill-gold"><%= a.badge %></span></div>
          <% } %>
          <h2 class="text-lg sm:text-xl font-display font-semibold"><%= a.title %></h2>
          <div class="text-xs text-muted-2 mt-1">
            <%= new Date(a.created_at).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric'}) %>
            <% if (a.ends_at) { %>
              · Berakhir <%= new Date(a.ends_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short'}) %>
            <% } %>
          </div>

          <% if (a.description) { %>
            <p class="text-sm text-muted mt-3 leading-relaxed whitespace-pre-line"><%= a.description %></p>
          <% } %>

          <% const ytId = youtubeEmbedId(a.youtube_url); %>
          <% if (ytId) { %>
            <div class="mt-4 rounded-2xl overflow-hidden border border-white/10 aspect-video">
              <iframe src="https://www.youtube.com/embed/<%= ytId %>" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="w-full h-full"></iframe>
            </div>
          <% } %>

          <% const ttId = tiktokEmbedId(a.tiktok_url); %>
          <% if (ttId) { %>
            <div class="mt-4 rounded-2xl overflow-hidden border border-white/10">
              <iframe src="https://www.tiktok.com/embed/v2/<%= ttId %>" allow="encrypted-media" class="w-full" style="height:550px;border:0"></iframe>
            </div>
          <% } else if (a.tiktok_url) { %>
            <a href="<%= a.tiktok_url %>" target="_blank" rel="noopener" class="btn btn-outline mt-4 rounded-full py-2.5 px-5 text-sm">
              <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.16a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.59z"/></svg>
              Tonton di TikTok
            </a>
          <% } %>

          <% if (a.external_url) { %>
            <a href="<%= a.external_url %>" target="_blank" rel="noopener" class="btn btn-gold mt-4 rounded-full px-5 h-11 text-sm">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              Lihat Selengkapnya
            </a>
          <% } %>
        </div>
      </div>
    <% }); %>
  </div>
<% } %>
