
// ── COVER OPEN ──────────────────────────────────
document.getElementById('btn-open').addEventListener('click', () => {
  document.getElementById('cover').classList.add('hide');
  document.body.style.overflow = 'auto';
  startMusic();
});

// ── COUNTDOWN ────────────────────────────────────
const eventDate = new Date('2026-05-26T08:00:00'); // ← Ganti sesuai tanggal acara

function updateCountdown() {
  const now = new Date();
  const diff = eventDate - now;

  if (diff <= 0) {
    document.getElementById('countdown-grid').innerHTML =
      `<p class="countdown-done"><iconify-icon icon="mdi:party-popper"></iconify-icon> Hari Istimewa Telah Tiba! <iconify-icon icon="mdi:party-popper"></iconify-icon></p>`;
    return;
  }

  const days    = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours   = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  document.getElementById('cd-days').textContent    = String(days).padStart(2, '0');
  document.getElementById('cd-hours').textContent   = String(hours).padStart(2, '0');
  document.getElementById('cd-minutes').textContent = String(minutes).padStart(2, '0');
  document.getElementById('cd-seconds').textContent = String(seconds).padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);

// ── LIGHTBOX ─────────────────────────────────────
const lightbox = document.getElementById('lightbox');
const lbImg    = document.getElementById('lb-img');

document.querySelectorAll('.gallery-item img').forEach(img => {
  img.addEventListener('click', () => {
    lbImg.src = img.src;
    lightbox.classList.add('active');
  });
});
document.querySelector('.close-lb').addEventListener('click', () => {
  lightbox.classList.remove('active');
});
lightbox.addEventListener('click', (e) => {
  if (e.target === lightbox) lightbox.classList.remove('active');
});

// ── COPY REKENING ─────────────────────────────────
document.querySelectorAll('.copy-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const text = btn.dataset.copy;
    navigator.clipboard.writeText(text).then(() => {
      const orig = btn.textContent;
      btn.textContent = '✓ Disalin!';
      btn.style.background = '#27703A';
      setTimeout(() => {
        btn.textContent = orig;
        btn.style.background = '';
      }, 2000);
    });
  });
});

// ── RSVP & UCAPAN ────────────────────────────────
const wishes = [
  { name: "Ibu Sari Dewi", attend: "Hadir", msg: "Selamat ya, semoga rumah tangganya sakinah mawaddah warahmah. Bahagia selalu! <iconify-icon icon=\"mdi:flower\" style=\"vertical-align:-2px;\"></iconify-icon>", time: "Baru saja" },
  { name: "Budi Fauzi", attend: "Hadir", msg: "Wah selamat! Semoga jadi keluarga yang harmonis dan penuh berkah dari Allah SWT.", time: "5 menit lalu" },
  { name: "Keluarga Besar Hasan", attend: "Hadir", msg: "Alhamdulillah, akhirnya hari yang ditunggu-tunggu tiba. Semoga langgeng dan bahagia dunia akhirat! <iconify-icon icon=\"mdi:hands-pray\" style=\"vertical-align:-2px;\"></iconify-icon>", time: "12 menit lalu" },
];

function renderWishes() {
  const list = document.getElementById('wishes-list');
  list.innerHTML = wishes.map(w => `
    <div class="wish-item">
      <div class="wish-name"><iconify-icon icon="mdi:heart" style="color:var(--emas-muda);vertical-align:-2px;"></iconify-icon> ${w.name}</div>
      <div class="wish-attend">${w.attend}</div>
      <div class="wish-msg">"${w.msg}"</div>
      <div class="wish-time">${w.time}</div>
    </div>
  `).join('');
}
renderWishes();

document.getElementById('rsvp-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const name    = document.getElementById('f-name').value.trim();
  const attend  = document.getElementById('f-attend').value;
  const msg     = document.getElementById('f-msg').value.trim();
  if (!name) return;

  wishes.unshift({ name, attend, msg: msg || '(Tanpa pesan)', time: 'Baru saja' });
  localStorage.setItem('betawi_wishes', JSON.stringify(wishes));
  renderWishes();

  document.getElementById('rsvp-form').reset();
  const success = document.getElementById('rsvp-success');
  success.style.display = 'block';
  setTimeout(() => { success.style.display = 'none'; }, 4000);
  document.getElementById('ucapan').scrollIntoView({ behavior: 'smooth' });
});

// ── MUSIC ────────────────────────────────────────
const audio = document.getElementById('bg-music');
let playing = false;

function startMusic() {
  if (audio) {
    audio.volume = 1.0;
    audio.play().then(() => {
      playing = true;
      document.getElementById('music-btn').classList.add('playing');
      document.getElementById('music-btn').innerHTML = '<iconify-icon icon="mdi:music-note"></iconify-icon>';
    }).catch(err => console.log("Autoplay prevented", err));
  }
}

document.body.addEventListener('click', () => {
  if (!playing) startMusic();
}, { once: true });

document.getElementById('music-btn').addEventListener('click', (e) => {
  e.stopPropagation();
  playing = !playing;
  const btn = document.getElementById('music-btn');
  if (playing) {
    audio.play();
    btn.classList.add('playing');
    btn.innerHTML = '<iconify-icon icon="mdi:music-note"></iconify-icon>';
  } else {
    audio.pause();
    btn.classList.remove('playing');
    btn.innerHTML = '<iconify-icon icon="mdi:music-note-off"></iconify-icon>';
  }
});

// ── SCROLL TOP ───────────────────────────────────
const scrollTopBtn = document.getElementById('scroll-top');
window.addEventListener('scroll', () => {
  if (window.scrollY > 300) scrollTopBtn.classList.add('visible');
  else scrollTopBtn.classList.remove('visible');
});
scrollTopBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

// ── REVEAL ON SCROLL ──────────────────────────────
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade').forEach(el => observer.observe(el));
