async function loadAnnotations(){
  const panel=document.getElementById('active-note-panel');
  const marks=[...document.querySelectorAll('.annotated-highlight[data-note-id]')];
  if(!panel || !marks.length) return;

  const res=await fetch('data/annotations.json');
  const notes=await res.json();
  const byId=Object.fromEntries(notes.map(n=>[n.id,n]));

  function render(noteId, mark){
    const note=byId[noteId];
    if(!note) return;
    document.querySelectorAll('.annotated-highlight.is-active').forEach(el=>el.classList.remove('is-active'));
    mark.classList.add('is-active');
    panel.dataset.empty='false';
    panel.className=`active-note-panel ${note.type || ''}`.trim();
    panel.innerHTML=`
      <div class="active-note-type">${note.title}</div>
      ${note.subtitle ? `<h3>${note.subtitle}</h3>` : ''}
      <p>${note.text}</p>
    `;
  }

  marks.forEach(mark=>{
    mark.addEventListener('click',()=>render(mark.dataset.noteId, mark));
    mark.addEventListener('keydown',(event)=>{
      if(event.key==='Enter' || event.key===' '){
        event.preventDefault();
        render(mark.dataset.noteId, mark);
      }
    });
  });
}
loadAnnotations();