document.querySelectorAll('[data-hud-state]').forEach((button) => {
  button.addEventListener('click', () => {
    const screen = button.closest('.studio-screen');
    const state = button.dataset.hudState;
    screen.dataset.hud = state;
    screen.querySelectorAll('[data-hud-state]').forEach((peer) => {
      peer.setAttribute('aria-pressed', String(peer === button));
    });
  });
});

document.querySelectorAll('.selectable-node').forEach((node) => {
  node.addEventListener('click', () => {
    node.classList.toggle('is-selected');
    const screen = node.closest('.studio-screen');
    const count = screen.querySelectorAll('.selectable-node.is-selected').length;
    const copy = screen.querySelector('[data-selection-copy]');
    copy.textContent = count
      ? `${count} living ${count === 1 ? 'thing' : 'things'} selected. Gather is reversible until you name the intent.`
      : 'Select nodes or say “gather these.” Nothing changes authority until you name the intent.';
  });
});

document.querySelectorAll('[data-gather]').forEach((button) => {
  button.addEventListener('click', () => {
    const screen = button.closest('.studio-screen');
    const count = screen.querySelectorAll('.selectable-node.is-selected').length;
    if (!count) {
      screen.querySelector('[data-selection-copy]').textContent = 'Choose at least one Persona, agent, Project, or artifact first.';
      return;
    }
    screen.classList.toggle('is-gathered');
    const gathered = screen.classList.contains('is-gathered');
    button.textContent = gathered ? 'Release gather' : 'Gather selected';
    screen.querySelector('[data-selection-copy]').textContent = gathered
      ? 'Gather Ring open. Ki suggests: start a Project, compare materials, share with the Relationship, or open a live channel.'
      : 'Selection returned to its original places. No state changed.';
  });
});

document.querySelectorAll('[data-tv-holder]').forEach((button) => {
  button.addEventListener('click', () => {
    const holder = button.dataset.tvHolder;
    const frame = button.closest('[data-tv-demo]');
    frame.querySelector('[data-holder-name]').textContent = holder;
    frame.querySelectorAll('[data-tv-holder]').forEach((peer) => {
      peer.setAttribute('aria-pressed', String(peer === button));
    });
  });
});

const sections = [...document.querySelectorAll('main section[id]')];
const navLinks = [...document.querySelectorAll('.site-nav a[href^="#"]')];
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    const visible = entries
      .filter((entry) => entry.isIntersecting)
      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
    if (!visible) return;
    navLinks.forEach((link) => {
      link.setAttribute('aria-current', link.getAttribute('href') === `#${visible.target.id}` ? 'true' : 'false');
    });
  }, { rootMargin: '-25% 0px -60% 0px', threshold: [0.05, 0.25, 0.5] });
  sections.forEach((section) => observer.observe(section));
}
