<script>
(function(){
  const pinGroups = document.querySelectorAll('.pin-group');
  const connPaths = document.querySelectorAll('.conn-path');

  // Show pins with staggered delay
  function activateMap() {
    connPaths.forEach(function(path, i) {
      setTimeout(function(){ path.classList.add('show'); }, 400 + i * 100);
    });
    pinGroups.forEach(function(group, i) {
      setTimeout(function(){ group.classList.add('show'); }, 200 + i * 130);
    });
  }

  // IntersectionObserver
  const svg = document.querySelector('.global-map');
  if (svg) {
    const obs = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if (e.isIntersecting){ activateMap(); obs.disconnect(); }
      });
    }, { threshold: 0.1 });
    obs.observe(svg);
  } else { activateMap(); }

  // Hover sync: list ↔ pin
  const listItems = document.querySelectorAll('.location-list li[data-country]');
  listItems.forEach(function(item){
    const country = item.getAttribute('data-country');
    const pin = document.querySelector('.pin-group[data-country="'+country+'"]');
    item.addEventListener('mouseenter', function(){ item.classList.add('active'); if(pin) pin.classList.add('active'); });
    item.addEventListener('mouseleave', function(){ item.classList.remove('active'); if(pin) pin.classList.remove('active'); });
  });
  pinGroups.forEach(function(group){
    const country = group.getAttribute('data-country');
    const listItem = document.querySelector('.location-list li[data-country="'+country+'"]');
    group.addEventListener('mouseenter', function(){ group.classList.add('active'); if(listItem) listItem.classList.add('active'); });
    group.addEventListener('mouseleave', function(){ group.classList.remove('active'); if(listItem) listItem.classList.remove('active'); });
  });
})();
</script>