/* ============================================================
   APP.JS — Toko Kusen & Gypsum Budi Jaya
   Script publik: navbar scroll, reveal animasi, dll.
   ============================================================ */

document.addEventListener('DOMContentLoaded', () => {

  // ── 1. NAVBAR: tambah class 'scrolled' saat di-scroll ────
  const navbar = document.querySelector('.main-navbar');
  if (navbar) {
    window.addEventListener('scroll', () => {
      navbar.classList.toggle('scrolled', window.scrollY > 50);
    }, { passive: true });
  }

  // ── 2. SCROLL REVEAL via IntersectionObserver ──────────────
  const reveals = document.querySelectorAll('.reveal, .timeline-item');
  if (reveals.length) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          observer.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    reveals.forEach(el => observer.observe(el));
  }

  // ── 3. COUNT-UP ANIMASI angka statistik ────────────────────
  const counters = document.querySelectorAll('[data-count]');
  if (counters.length) {
    const countObserver = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          animateCount(e.target);
          countObserver.unobserve(e.target);
        }
      });
    }, { threshold: 0.5 });
    counters.forEach(el => countObserver.observe(el));
  }

  function animateCount(el) {
    const target = parseInt(el.dataset.count, 10);
    const suffix = el.dataset.suffix || '';
    const duration = 1800;
    const start = performance.now();
    const update = (now) => {
      const t = Math.min((now - start) / duration, 1);
      // easeOutExpo
      const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
      el.textContent = Math.round(eased * target) + suffix;
      if (t < 1) requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
  }

  // ── 4. SMOOTH SCROLL untuk link anchor ────────────────────
  document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', (e) => {
      const id  = a.getAttribute('href').slice(1);
      const el  = document.getElementById(id);
      if (el) {
        e.preventDefault();
        const offset = 80; // tinggi navbar
        window.scrollTo({ top: el.offsetTop - offset, behavior: 'smooth' });
      }
    });
  });

  // ── 5. FLASH MESSAGE: auto-dismiss setelah 5 detik ─────────
  const flashes = document.querySelectorAll('.alert-dismissible');
  flashes.forEach(alert => {
    setTimeout(() => {
      const btn = alert.querySelector('.btn-close');
      if (btn) btn.click();
    }, 5000);
  });

  // ── 6. GALERI LIGHTBOX sederhana (tanpa library) ──────────
  const galeriItems = document.querySelectorAll('.galeri-item');
  if (galeriItems.length) {
    // Buat modal overlay
    const overlay = document.createElement('div');
    overlay.id = 'lb-overlay';
    overlay.style.cssText = `
      display:none;position:fixed;inset:0;z-index:9999;
      background:rgba(0,0,0,.92);align-items:center;
      justify-content:center;cursor:zoom-out;
    `;
    const img = document.createElement('img');
    img.style.cssText = `
      max-width:92vw;max-height:92vh;
      border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);
      object-fit:contain;
    `;
    const caption = document.createElement('div');
    caption.style.cssText = `
      position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
      color:white;text-align:center;font-size:.9rem;
      background:rgba(0,0,0,.5);padding:.5rem 1rem;border-radius:8px;
      backdrop-filter:blur(8px);
    `;
    overlay.appendChild(img);
    overlay.appendChild(caption);
    document.body.appendChild(overlay);

    galeriItems.forEach(item => {
      item.style.cursor = 'zoom-in';
      item.addEventListener('click', () => {
        const src    = item.querySelector('img').src;
        const title  = item.querySelector('h6')?.textContent || '';
        const sub    = item.querySelector('small')?.textContent || '';
        img.src      = src;
        caption.textContent = [title, sub].filter(Boolean).join(' · ');
        overlay.style.display = 'flex';
        document.body.style.overflow = 'hidden';
      });
    });

    overlay.addEventListener('click', () => {
      overlay.style.display = 'none';
      document.body.style.overflow = '';
    });

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && overlay.style.display === 'flex') {
        overlay.style.display = 'none';
        document.body.style.overflow = '';
      }
    });
  }

  // ── 7. TOOLTIP Bootstrap (aktifkan semua) ──────────────────
  const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  tooltips.forEach(el => new bootstrap.Tooltip(el));

});