(function(){
  const tab = document.getElementById('sg-toggle');
  const panel = document.getElementById('sg-panel');
  const inner = panel?.querySelector('.sg-panel__inner');
  const closeBtn = panel?.querySelector('.sg-close');
  const backdrop = panel?.querySelector('.sg-backdrop');

  if(!tab || !panel || !inner) return;

  // Open/close helpers
  function openPanel(){
    panel.hidden = false;
    panel.setAttribute('data-open','true');
    tab.setAttribute('aria-expanded','true');
    // focus the panel for a11y
    requestAnimationFrame(()=> inner.focus());
    // prevent body scroll
    document.documentElement.style.overflow = 'hidden';
  }
  function closePanel(){
    panel.removeAttribute('data-open');
    tab.setAttribute('aria-expanded','false');
    // allow transition then hide
    setTimeout(()=>{ panel.hidden = true; }, 250);
    tab.focus();
    document.documentElement.style.overflow = '';
  }

  tab.addEventListener('click', () => {
    const isOpen = panel.getAttribute('data-open') === 'true';
    isOpen ? closePanel() : openPanel();
  });
  closeBtn?.addEventListener('click', closePanel);
  backdrop?.addEventListener('click', closePanel);

  // ESC to close
  document.addEventListener('keydown', (e)=>{
    if(e.key === 'Escape' && panel.getAttribute('data-open') === 'true'){ closePanel(); }
  });

  // Basic focus trap inside panel
  panel.addEventListener('keydown', (e)=>{
    if(e.key !== 'Tab') return;
    const focusables = panel.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
    if(!focusables.length) return;
    const first = focusables[0];
    const last  = focusables[focusables.length - 1];
    if(e.shiftKey && document.activeElement === first){ last.focus(); e.preventDefault(); }
    else if(!e.shiftKey && document.activeElement === last){ first.focus(); e.preventDefault(); }
  });
})();