/* ═══════════════════════════════════════════════
   intro.js — SentiMeter Intro Page Logic
   ═══════════════════════════════════════════════ */

'use strict';

// ── INJECT SIDEBAR ───────────────────────────
injectLayout('nav-intro');

// ── SCROLL REVEAL ───────────────────────────
function initScrollReveal() {
  // Immediately trigger hero reveals
  document.querySelectorAll('#introHero .reveal-up').forEach(el => {
    const delay = parseInt(getComputedStyle(el).getPropertyValue('--d')) || 0;
    setTimeout(() => el.classList.add('visible'), delay);
  });

  // Observe all other reveal-up elements
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('visible');
        io.unobserve(e.target);
      }
    });
  }, { rootMargin: '0px 0px -50px 0px', threshold: 0.05 });

  document.querySelectorAll('.reveal-up:not(#introHero .reveal-up)').forEach(el => io.observe(el));
}

// ── COUNTER ANIMATION ───────────────────────
function animateCounters() {
  document.querySelectorAll('.ih-stat-n').forEach(el => {
    const raw = el.dataset.to;
    if (raw === '∞') {
      setTimeout(() => {
        el.textContent = '∞';
        el.style.transition = 'transform 0.25s';
        el.style.transform = 'scale(1.15)';
        setTimeout(() => el.style.transform = '', 250);
      }, 700);
      return;
    }
    const target = parseInt(raw);
    let v = 0;
    const step = Math.ceil(target / 25);
    const iv = setInterval(() => {
      v = Math.min(v + step, target);
      el.textContent = v;
      if (v >= target) {
        clearInterval(iv);
        el.style.transition = 'transform 0.2s';
        el.style.transform = 'scale(1.12)';
        setTimeout(() => el.style.transform = '', 200);
      }
    }, 45);
  });
}

// ── CSV DEMO ─────────────────────────────────
const CSV_ROWS = [
  { n: '—', h: true,  text: 'full_text',                    user: 'username',      date: 'created_at',  num: 'retweet' },
  { n: '1', h: false, text: 'pemilu harus diulang...',       user: '@politikus_id', date: '2024-02-14',  num: '1234' },
  { n: '2', h: false, text: 'kpk tetap tegak berdiri...',    user: '@warga_aktif',  date: '2024-02-15',  num: '234' },
  { n: '3', h: false, text: 'bangga kemajuan ibu kota...',   user: '@jakarta_cinta',date: '2024-02-15',  num: '44' },
  { n: '4', h: false, text: 'reformasi birokrasi berjalan...',user: '@pegawai_asn', date: '2024-02-16',  num: '89' },
];

function buildCodeDemo() {
  const target = document.getElementById('codeDemo');
  if (!target) return;
  target.innerHTML = '';

  CSV_ROWS.forEach((row, i) => {
    const div = document.createElement('div');
    div.className = 'csv-row';
    div.style.opacity = '0';
    div.style.transition = `opacity 0.3s ease ${i * 130}ms`;

    const cls = row.h ? 'csv-h' : '';
    const textCls = row.h ? 'csv-h' : 'csv-text';
    const userCls = row.h ? 'csv-h' : 'csv-user';
    const dateCls = row.h ? 'csv-h' : 'csv-date';
    const numCls  = row.h ? 'csv-h' : 'csv-num';

    div.innerHTML = `
      <span class="csv-lnum">${row.n}</span>
      <span class="${textCls}" title="${row.text}">${row.text.length > 18 ? row.text.slice(0,18)+'…' : row.text}</span>
      <span class="${userCls}">${row.user}</span>
      <span class="${dateCls}">${row.date}</span>
      <span class="${numCls}">${row.num}</span>
    `;
    target.appendChild(div);

    setTimeout(() => div.style.opacity = '1', 350 + i * 130);
  });

  // Cursor row
  const cur = document.createElement('div');
  cur.className = 'csv-row';
  cur.innerHTML = '<span class="csv-lnum">5</span><span class="csv-cursor"></span>';
  cur.style.opacity = '0';
  cur.style.transition = `opacity 0.3s ease ${CSV_ROWS.length * 130 + 350}ms`;
  target.appendChild(cur);
  setTimeout(() => cur.style.opacity = '1', CSV_ROWS.length * 130 + 650);
}

// ── SMOOTH "LEARN MORE" ─────────────────────
function initSmoothScroll() {
  document.getElementById('learnMoreBtn')?.addEventListener('click', e => {
    e.preventDefault();
    document.getElementById('cara-pakai')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
}

// ── INIT ─────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  initScrollReveal();
  setTimeout(animateCounters, 650);
  buildCodeDemo();
  initSmoothScroll();
});