const modeToggle = document.getElementById('modeToggle');
const modeLabel = document.getElementById('modeLabel');
const workItems = document.querySelectorAll('.work-item');
const workIndex = document.getElementById('workIndex');
const workTitle = document.getElementById('workTitle');
const workCopy = document.getElementById('workCopy');
const revealBlocks = document.querySelectorAll('.reveal');

function applyMode() {
  const isLight = document.body.classList.contains('light-mode');
  modeToggle.textContent = isLight ? 'Dark Mode' : 'Light Mode';
  modeLabel.textContent = isLight ? 'Editorial Light' : 'Editorial Dark';
}

modeToggle?.addEventListener('click', () => {
  document.body.classList.toggle('light-mode');
  applyMode();
});

workItems.forEach((item) => {
  item.addEventListener('click', () => {
    workItems.forEach((button) => button.classList.remove('is-active'));
    item.classList.add('is-active');
    workIndex.textContent = item.dataset.index || '';
    workTitle.textContent = item.dataset.title || '';
    workCopy.textContent = item.dataset.copy || '';
  });
});

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.18 },
);

revealBlocks.forEach((block) => observer.observe(block));
applyMode();