Let me check the existing site's map more closely and then build an interactive world map section.

Now I have the full picture. The existing shippingbaseball.com shows a world map with team counts by region. I'll build an interactive SVG world map section with those regional team counts and place it right after the Teams section. Let me also read the globals.css for the current theme tokens:

Now I have all the context. Let me build the interactive world map section and add it to the page. The existing site shows 13 regions with team counts. I'll create a beautiful SVG-based world map with interactive hotspots.

Now let me add the map to the page and navigation:

Now add the Map link to the navigation:

I've added an interactive World Map section to the site, placed right after the Teams section. It features an SVG world map with continent outlines, latitude/longitude grid lines, and animated pulsing markers for all 13 regions matching the data from shippingbaseball.com (4 teams, 4 teams, 2 teams, etc.). Each marker is interactive -- hovering highlights it and clicking opens a detail panel showing the region name and its home ports. Below the map, a stats bar shows totals for regions, teams, ports, and countries. The "Map" link has been added to the navigation bar for easy scroll access.

Now let me make sure the hero section has the matching id="hero" so the scroll link works:

The hero section already has id="hero", so everything is correctly wired up. I added a "Home" entry as the first item in the navLinks array, pointing to #hero. When clicked (desktop or mobile), it will smooth-scroll to the top of the hero section and highlight as active when that section is in view.