Susunan Acara Berantakan? Bikin Interactive Rundown & Schedule Tab Switcher!

<!-- TOMBOL NAVIGASI TAB RUNDOWN -->
<div class="luxee-tab-nav">
  <button type="button" class="luxee-tab-btn active" data-target="rundown-day-1">📅 Hari Ke-1 (Fundamental)</button>
  <button type="button" class="luxee-tab-btn" data-target="rundown-day-2">🚀 Hari Ke-2 (Hands-on Lab)</button>
</div>

<!-- KONTEN JADWAL HARI 1 -->
<div id="rundown-day-1" class="luxee-tab-content active">
  <div class="rundown-item">
    <span class="rundown-time">09:00 - 10:30 WIB</span>
    <h4>Sesi Pembuka & Keynote Speech</h4>
    <p>Pengenalan arsitektur dan tren teknologi 2026 bersama pakar industri.</p>
  </div>
  <div class="rundown-item">
    <span class="rundown-time">10:45 - 12:00 WIB</span>
    <h4>Deep Dive: Core Implementation</h4>
    <p>Studi kasus implementasi sistem dan praktik terbaik penataan alur kerja.</p>
  </div>
</div>

<!-- KONTEN JADWAL HARI 2 -->
<div id="rundown-day-2" class="luxee-tab-content">
  <div class="rundown-item">
    <span class="rundown-time">09:00 - 11:30 WIB</span>
    <h4>Live Coding & Mentoring Eksklusif</h4>
    <p>Praktek langsung pembuatan proyek dari nol hingga siap tayang.</p>
  </div>
  <div class="rundown-item">
    <span class="rundown-time">13:00 - 14:30 WIB</span>
    <h4>Q&A Panel & Pembagian Sertifikat</h4>
    <p>Sesi tanya jawab interaktif dan evaluasi portofolio peserta.</p>
  </div>
</div>

<style>
.luxee-tab-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.luxee-tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(194, 155, 100, 0.2);
  color: #C4C0B5;
  padding: 10px 22px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.luxee-tab-btn.active, .luxee-tab-btn:hover {
  background: #C29B64;
  color: #121814;
  border-color: #D4AF37;
  transform: translateY(-2px);
}
.luxee-tab-content {
  display: none;
  animation: fadeInTab 0.4s ease forwards;
}
.luxee-tab-content.active {
  display: block;
}
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.rundown-item {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #C29B64;
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 0 8px 8px 0;
}
.rundown-item h4 {
  margin: 4px 0;
  color: #F4F1EA;
}
.rundown-item p {
  margin: 0;
  font-size: 0.85rem;
  color: #C4C0B5;
}
.rundown-time {
  font-size: 0.85rem;
  color: #C29B64;
  font-weight: 700;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const tabBtns = document.querySelectorAll('.luxee-tab-btn');
  tabBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const targetId = this.getAttribute('data-target');
      
      tabBtns.forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      
      document.querySelectorAll('.luxee-tab-content').forEach(content => {
        content.classList.remove('active');
      });
      
      const targetContent = document.getElementById(targetId);
      if (targetContent) {
        targetContent.classList.add('active');
      }
    });
  });
});
</script>