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 stageCard = document.querySelector('.stage-card');
const revealBlocks = document.querySelectorAll('.reveal');
const storedMode = window.localStorage.getItem('spectra-mode');

if (storedMode === 'light') {
  document.body.classList.add('light-mode');
}

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

function updateWorkStage(item) {
  workItems.forEach((button) => {
    button.classList.remove('is-active');
    button.setAttribute('aria-selected', 'false');
  });

  item.classList.add('is-active');
  item.setAttribute('aria-selected', 'true');

  stageCard?.classList.remove('is-refreshing');
  requestAnimationFrame(() => {
    stageCard?.classList.add('is-refreshing');
    window.setTimeout(() => {
      stageCard?.classList.remove('is-refreshing');
    }, 340);
  });

  workIndex.textContent = item.dataset.index || '';
  workTitle.textContent = item.dataset.title || '';
  workCopy.textContent = item.dataset.copy || '';
}

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

workItems.forEach((item) => {
  item.addEventListener('click', () => {
    updateWorkStage(item);
  });
});

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));
if (workItems[0]) {
  updateWorkStage(workItems[0]);
}
applyMode();