mapboxgl.accessToken = 'pk.eyJ1Ijoic3Jhc2hpZGpyMTIzIiwiYSI6ImNtMmt4NjgwczA1bW0yaW9tMGZlOWEzcXEifQ._If3uaI0XkL_gzRAZJHlkg';
  const bounds = [
    [-24.027421939301178, -13.139816660772302],
    [ 20.715666482029366,  12.763659          ]
  ];
  // Initialize Mapbox
  const map = new mapboxgl.Map({
    container: 'im-map',
    style: 'mapbox://styles/srashidjr123/cm4kk9uzg00on01qw7l9730zc',
    projection:'mercator',
    maxBounds: bounds
  });

// Optional: custom logo control
class LogoControl {
  onAdd() {
    this.container = document.createElement('div');
    this.container.className = 'mapboxgl-ctrl';
    Object.assign(this.container.style, {
      backgroundImage: 'url("https://nam.org/wp-content/themes/nam/assets/img/NAM-logo.png")',
      backgroundSize: 'contain',
      width: '85px',
      height: '56px',
      cursor: 'pointer',
      margin: '10px'
    });
    this.container.onclick = () => window.open('https://www.nam.org','_blank');
    return this.container;
  }
  onRemove() { this.container.remove(); }
}
map.addControl(new LogoControl(), 'bottom-right');
function formatInvestment(num) {
  if (num >= 1_000_000_000) {
    return (num / 1_000_000_000).toFixed(1).replace(/\.0$/, '') + 'b';
  }
  if (num >= 1_000_000) {
    return (num / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'm';
  }
  if (num > 0) {
    // The toLocaleString() method formats the number with commas
    return num.toLocaleString('en-US');
  }
  return num;
}

/**
 * Formats a number into thousands (k).
 * For numbers less than a thousand, it returns the number as is.
 * Example: 12_500 => "12.5k"
 * Example: 950 => 950
 */
function formatJobs(num) {
  if (num >= 1000) {
    return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
  }
  return num;
}
map.on('load', () => {
    // Check for the layer first
    if (!map.getLayer('newstickeralbers')) {
        console.error("CRITICAL: The layer 'newstickeralbers' was NOT found.");
        return;
    }

    // Move layer to top to ensure it's clickable
    map.moveLayer('newstickeralbers');

    // Variable to store the ID of the hovered feature
    let hoveredPointId = null;

    map.on('mouseenter', 'newstickeralbers', (e) => {
        map.getCanvas().style.cursor = 'pointer';
        
        if (e.features.length > 0) {
            if (hoveredPointId !== null) {
                map.setFeatureState(
                    { source: 'newstickeralbers', id: hoveredPointId },
                    { hover: false }
                );
            }
            
            // Get the ID of the new hovered point and set its state to true
            hoveredPointId = e.features[0].id;
            map.setFeatureState(
                { source: 'newstickeralbers', id: hoveredPointId },
                { hover: true }
            );
        }
    });

    map.on('mouseleave', 'newstickeralbers', () => {
        map.getCanvas().style.cursor = 'auto';

        // When the mouse leaves the layer, reset the state of the last hovered point
        if (hoveredPointId !== null) {
            map.setFeatureState(
                { source: 'newstickeralbers', id: hoveredPointId },
                { hover: false }
            );
        }
        hoveredPointId = null; // Clear the stored ID
    });
    
  map.on('click', 'newstickeralbers', (e) => {
    const props = e.features[0].properties;
    
    // Start building the HTML for the popup
    let html = `<a style="font-size:14pt;" href="${props.url || '#'}" target="_blank">${props.title || 'Details'}</a>`;
    
    // Check for and format the investment amount
    if (props.amt > 0) {
      html += `<p style="font-size:12pt;font-family:Arial;margin-top:0.5em;margin-bottom:0;">Investment: $${formatInvestment(props.amt)}</p>`;
    }
    
    // Check for and format the jobs number (using the new 'jobs' property)
    if (props.jobs > 0) {
      html += `<p style="margin-top:0.5em;font-size:12pt;font-family:Arial;">Jobs created: ${formatJobs(props.jobs)}</p>`;
    }

    new mapboxgl.Popup()
      .setLngLat(e.lngLat)
      .setHTML(html)
      .addTo(map);
  });

});// Resize handler: maintain bounds
window.addEventListener('resize', () => {
  map.resize();
  map.fitBounds(bounds, { padding: 15, animate: false });
});