Places I’ve worked while traveling

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Places I've Worked While Traveling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@300;400;600&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: #0d1117;
    color: #e8e0d0;
    font-family: 'Source Sans 3', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    z-index: 1000;
    flex-shrink: 0;
  }

  .header-left h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #d4af37;
    letter-spacing: 0.05em;
    line-height: 1.2;
  }

  .header-left p {
    font-size: 0.75rem;
    color: rgba(232, 224, 208, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .stats {
    display: flex;
    gap: 20px;
  }

  .stat {
    text-align: center;
  }

  .stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #d4af37;
    line-height: 1;
  }

  .stat-label {
    font-size: 0.65rem;
    color: rgba(232, 224, 208, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .legend {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: rgba(232, 224, 208, 0.7);
    letter-spacing: 0.05em;
  }

  .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.3);
  }

  #map {
    flex: 1;
    width: 100%;
  }

  /* Custom popup styles */
  .leaflet-popup-content-wrapper {
    background: #1a1a2e;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    color: #e8e0d0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  }

  .leaflet-popup-tip {
    background: #1a1a2e;
  }

  .leaflet-popup-content {
    margin: 10px 14px;
  }

  .popup-name {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    color: #d4af37;
    font-weight: 700;
  }

  .popup-region {
    font-size: 0.7rem;
    color: rgba(232, 224, 208, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
  }

  .popup-visits {
    font-size: 0.75rem;
    color: #a8d8a8;
    margin-top: 4px;
  }

  .leaflet-control-zoom a {
    background: #1a1a2e !important;
    color: #d4af37 !important;
    border-color: rgba(212,175,55,0.3) !important;
  }

  .leaflet-control-zoom a:hover {
    background: #16213e !important;
  }

  .leaflet-control-attribution {
    background: rgba(13, 17, 23, 0.8) !important;
    color: rgba(232,224,208,0.4) !important;
    font-size: 0.6rem;
  }

  .leaflet-control-attribution a { color: rgba(212,175,55,0.6) !important; }

  .filter-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 6px;
    background: rgba(13, 17, 23, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 8px 12px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
  }

  .filter-btn {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(232, 224, 208, 0.6);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .filter-btn:hover, .filter-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
    color: #d4af37;
  }
</style>
</head>
<body>

<header>
  <div class="header-left">
    <h1>Places I've Worked While Traveling</h1>
    <p>A working life without borders</p>
  </div>
  <div class="legend">
    <div class="legend-item"><div class="legend-dot" style="background:#d4af37"></div>UK & Ireland</div>
    <div class="legend-item"><div class="legend-dot" style="background:#4fc3f7"></div>USA</div>
    <div class="legend-item"><div class="legend-dot" style="background:#81c784"></div>Canada</div>
    <div class="legend-item"><div class="legend-dot" style="background:#ff8a65"></div>Iceland</div>
    <div class="legend-item"><div class="legend-dot" style="background:#ce93d8"></div>Europe</div>
    <div class="legend-item"><div class="legend-dot" style="background:#f06292"></div>Australia</div>
    <div class="legend-item"><div class="legend-dot" style="background:#4db6ac"></div>Americas</div>
  </div>
  <div class="stats">
    <div class="stat"><div class="stat-num" id="total-places">0</div><div class="stat-label">Locations</div></div>
    <div class="stat"><div class="stat-num" id="total-countries">0</div><div class="stat-label">Countries</div></div>
  </div>
</header>

<div id="map"></div>

<div class="filter-bar">
  <button class="filter-btn active" data-region="all" onclick="filterRegion('all', this)">All</button>
  <button class="filter-btn" data-region="uk" onclick="filterRegion('uk', this)">UK & Ireland</button>
  <button class="filter-btn" data-region="usa" onclick="filterRegion('usa', this)">USA</button>
  <button class="filter-btn" data-region="canada" onclick="filterRegion('canada', this)">Canada</button>
  <button class="filter-btn" data-region="iceland" onclick="filterRegion('iceland', this)">Iceland</button>
  <button class="filter-btn" data-region="europe" onclick="filterRegion('europe', this)">Europe</button>
  <button class="filter-btn" data-region="australia" onclick="filterRegion('australia', this)">Australia</button>
  <button class="filter-btn" data-region="americas" onclick="filterRegion('americas', this)">Americas</button>
</div>

<script>
const REGION_COLORS = {
  uk:        '#d4af37',
  usa:       '#4fc3f7',
  canada:    '#81c784',
  iceland:   '#ff8a65',
  europe:    '#ce93d8',
  australia: '#f06292',
  americas:  '#4db6ac',
  asia:      '#ffb74d',
};

function makeIcon(color) {
  return L.divIcon({
    className: '',
    html: `<svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M9 0C4.03 0 0 4.03 0 9c0 6.75 9 15 9 15s9-8.25 9-15c0-4.97-4.03-9-9-9z" fill="${color}" stroke="rgba(255,255,255,0.4)" stroke-width="1"/>
      <circle cx="9" cy="9" r="3.5" fill="rgba(0,0,0,0.35)"/>
    </svg>`,
    iconSize: [18, 24],
    iconAnchor: [9, 24],
    popupAnchor: [0, -24],
  });
}

const places = [
  // ── UK & Ireland ──────────────────────────────────────────────
  { name:"Frimley",            region:"uk", lat:51.320, lng:-0.742,  visits:1 },
  { name:"Guildford",          region:"uk", lat:51.236, lng:-0.570,  visits:1 },
  { name:"Liss",               region:"uk", lat:51.051, lng:-0.903,  visits:1 },
  { name:"Greater London",     region:"uk", lat:51.509, lng:-0.128,  visits:25 },
  { name:"Winscombe",          region:"uk", lat:51.339, lng:-2.843,  visits:1 },
  { name:"Armley (Leeds)",     region:"uk", lat:53.800, lng:-1.580,  visits:1 },
  { name:"Wooburn Green",      region:"uk", lat:51.562, lng:-0.695,  visits:1 },
  { name:"Warwick",            region:"uk", lat:52.281, lng:-1.584,  visits:1 },
  { name:"Runnymede",          region:"uk", lat:51.438, lng:-0.566,  visits:1 },
  { name:"Bracknell Forest",   region:"uk", lat:51.415, lng:-0.750,  visits:1 },
  { name:"Leckhampstead",      region:"uk", lat:51.970, lng:-1.265,  visits:1 },
  { name:"Teddington",         region:"uk", lat:51.424, lng:-0.331,  visits:1 },
  { name:"Hounslow",           region:"uk", lat:51.468, lng:-0.361,  visits:2 },
  { name:"Richmond upon Thames",region:"uk",lat:51.461, lng:-0.301,  visits:7 },
  { name:"Hillingdon",         region:"uk", lat:51.537, lng:-0.449,  visits:1 },
  { name:"Kew",                region:"uk", lat:51.484, lng:-0.285,  visits:1 },
  { name:"Shepton Mallet",     region:"uk", lat:51.194, lng:-2.546,  visits:1 },
  { name:"Staines",            region:"uk", lat:51.433, lng:-0.511,  visits:3 },
  { name:"Manchester",         region:"uk", lat:53.483, lng:-2.244,  visits:1 },
  { name:"Bristol",            region:"uk", lat:51.454, lng:-2.588,  visits:1 },
  { name:"Liphook",            region:"uk", lat:51.073, lng:-0.807,  visits:1 },
  { name:"Buckingham",         region:"uk", lat:51.994, lng:-0.987,  visits:2 },
  { name:"Oxford",             region:"uk", lat:51.752, lng:-1.258,  visits:3 },
  { name:"Streatley",          region:"uk", lat:51.527, lng:-1.233,  visits:1 },
  { name:"Exeter",             region:"uk", lat:50.718, lng:-3.534,  visits:4 },
  { name:"Gatwick",            region:"uk", lat:51.148, lng:-0.190,  visits:2 },
  { name:"Stanwell",           region:"uk", lat:51.457, lng:-0.469,  visits:1 },
  { name:"Surbiton",           region:"uk", lat:51.393, lng:-0.307,  visits:1 },
  { name:"Bath",               region:"uk", lat:51.381, lng:-2.360,  visits:1 },
  { name:"Cerney Wick",        region:"uk", lat:51.672, lng:-1.917,  visits:1 },
  { name:"Cookham",            region:"uk", lat:51.554, lng:-0.712,  visits:1 },
  { name:"Blackpool",          region:"uk", lat:53.817, lng:-3.053,  visits:1 },
  { name:"Anglesey",           region:"uk", lat:53.270, lng:-4.320,  visits:1 },
  { name:"Bethel, Wales",      region:"uk", lat:53.127, lng:-4.211,  visits:1 },
  { name:"Caldbeck",           region:"uk", lat:54.740, lng:-3.050,  visits:1 },
  { name:"Brackley",           region:"uk", lat:52.032, lng:-1.149,  visits:2 },
  { name:"St Peter Port, Guernsey", region:"uk", lat:49.456, lng:-2.536, visits:5 },
  { name:"Ottery St Mary",     region:"uk", lat:50.748, lng:-3.280,  visits:1 },
  { name:"Dawlish",            region:"uk", lat:50.581, lng:-3.466,  visits:1 },
  { name:"Torquay",            region:"uk", lat:50.462, lng:-3.525,  visits:1 },
  { name:"Paignton",           region:"uk", lat:50.435, lng:-3.563,  visits:1 },
  { name:"Okehampton",         region:"uk", lat:50.739, lng:-4.003,  visits:1 },
  { name:"Birmingham",         region:"uk", lat:52.480, lng:-1.903,  visits:1 },
  { name:"Fakenham",           region:"uk", lat:52.830, lng:0.853,   visits:1 },

  // ── USA: West ─────────────────────────────────────────────────
  { name:"Eugene, OR",         region:"usa", lat:44.052, lng:-123.087, visits:2 },
  { name:"North Bend, OR",     region:"usa", lat:43.406, lng:-124.224, visits:1 },
  { name:"Rockaway Beach, CA", region:"usa", lat:37.619, lng:-122.493, visits:5 },
  { name:"Sonoma, CA",         region:"usa", lat:38.292, lng:-122.458, visits:1 },
  { name:"Santa Cruz, CA",     region:"usa", lat:36.974, lng:-122.030, visits:6 },
  { name:"Portland, OR",       region:"usa", lat:45.523, lng:-122.676, visits:4 },
  { name:"San Rafael, CA",     region:"usa", lat:37.974, lng:-122.531, visits:1 },
  { name:"Nevada City, CA",    region:"usa", lat:39.261, lng:-121.015, visits:6 },
  { name:"Santa Barbara, CA",  region:"usa", lat:34.420, lng:-119.698, visits:1 },
  { name:"Lincoln City, OR",   region:"usa", lat:44.958, lng:-124.009, visits:1 },
  { name:"San Francisco, CA",  region:"usa", lat:37.774, lng:-122.419, visits:20 },
  { name:"Baywood–Los Osos, CA",region:"usa",lat:35.312, lng:-120.836, visits:4 },
  { name:"Oregon House, CA",   region:"usa", lat:39.382, lng:-121.284, visits:1 },
  { name:"Brookings, OR",      region:"usa", lat:42.054, lng:-124.286, visits:1 },
  { name:"Aptos, CA",          region:"usa", lat:36.977, lng:-121.900, visits:1 },
  { name:"Las Vegas, NV",      region:"usa", lat:36.169, lng:-115.140, visits:8 },
  { name:"Los Angeles, CA",    region:"usa", lat:34.052, lng:-118.244, visits:1 },
  { name:"Oakland, CA",        region:"usa", lat:37.804, lng:-122.271, visits:3 },
  { name:"Truckee, CA",        region:"usa", lat:39.328, lng:-120.183, visits:2 },
  { name:"Sacramento, CA",     region:"usa", lat:38.581, lng:-121.494, visits:3 },
  { name:"Pacifica, CA",       region:"usa", lat:37.614, lng:-122.487, visits:2 },
  { name:"Marina, CA",         region:"usa", lat:36.683, lng:-121.803, visits:1 },
  { name:"Ashland, OR",        region:"usa", lat:42.194, lng:-122.699, visits:1 },
  { name:"Dunsmuir, CA",       region:"usa", lat:41.213, lng:-122.271, visits:1 },
  { name:"Reno, NV",           region:"usa", lat:39.529, lng:-119.813, visits:16 },
  { name:"Woodland, CA",       region:"usa", lat:38.678, lng:-121.773, visits:1 },
  { name:"Santa Nella, CA",    region:"usa", lat:37.118, lng:-120.889, visits:1 },
  { name:"Chico, CA",          region:"usa", lat:39.729, lng:-121.837, visits:8 },
  { name:"Fairfield, CA",      region:"usa", lat:38.249, lng:-122.040, visits:1 },
  { name:"Roseville, CA",      region:"usa", lat:38.752, lng:-121.288, visits:1 },
  { name:"Sparks, NV",         region:"usa", lat:39.534, lng:-119.752, visits:5 },
  { name:"Elko, NV",           region:"usa", lat:40.832, lng:-115.763, visits:1 },
  { name:"Bellingham, WA",     region:"usa", lat:48.750, lng:-122.478, visits:1 },
  { name:"Seattle, WA",        region:"usa", lat:47.608, lng:-122.335, visits:1 },
  { name:"Pasadena, CA",       region:"usa", lat:34.148, lng:-118.144, visits:1 },
  { name:"Tempe, AZ",          region:"usa", lat:33.425, lng:-111.940, visits:1 },

  // USA: South/Central/East
  { name:"Washington, DC",     region:"usa", lat:38.907, lng:-77.037,  visits:3 },
  { name:"Orlando, FL",        region:"usa", lat:28.538, lng:-81.379,  visits:7 },
  { name:"Brooklyn, NY",       region:"usa", lat:40.650, lng:-73.950,  visits:1 },
  { name:"Vicksburg, MS",      region:"usa", lat:32.360, lng:-90.877,  visits:1 },
  { name:"New Orleans, LA",    region:"usa", lat:29.951, lng:-90.071,  visits:1 },
  { name:"Salt Lake City, UT", region:"usa", lat:40.760, lng:-111.891, visits:2 },
  { name:"Dallas, TX",         region:"usa", lat:32.776, lng:-96.797,  visits:1 },
  { name:"Austin, TX",         region:"usa", lat:30.267, lng:-97.743,  visits:2 },
  { name:"Williamsville, NY",  region:"usa", lat:42.963, lng:-78.738,  visits:1 },
  { name:"Jacksonville, FL",   region:"usa", lat:30.332, lng:-81.655,  visits:1 },
  { name:"Tampa, FL",          region:"usa", lat:27.948, lng:-82.458,  visits:1 },
  { name:"Buffalo, NY",        region:"usa", lat:42.886, lng:-78.879,  visits:2 },
  { name:"Rochester, NY",      region:"usa", lat:43.161, lng:-77.611,  visits:1 },
  { name:"Corona, NY",         region:"usa", lat:40.745, lng:-73.862,  visits:1 },
  { name:"Adirondacks, NY",    region:"usa", lat:44.100, lng:-74.000,  visits:1 },
  { name:"Minneapolis, MN",    region:"usa", lat:44.977, lng:-93.265,  visits:1 },
  { name:"Denver, CO",         region:"usa", lat:39.739, lng:-104.984, visits:1 },
  { name:"Colorado Springs, CO",region:"usa",lat:38.834, lng:-104.821, visits:1 },
  { name:"Sundance, WY",       region:"usa", lat:44.406, lng:-104.376, visits:1 },
  { name:"Phoenix, AZ",        region:"usa", lat:33.448, lng:-112.074, visits:1 },
  { name:"Albuquerque, NM",    region:"usa", lat:35.085, lng:-106.651, visits:1 },
  { name:"Santa Fe, NM",       region:"usa", lat:35.687, lng:-105.937, visits:2 },
  { name:"Norman, OK",         region:"usa", lat:35.222, lng:-97.439,  visits:1 },
  { name:"Atlanta, GA",        region:"usa", lat:33.749, lng:-84.388,  visits:1 },
  { name:"Chicago, IL",        region:"usa", lat:41.850, lng:-87.650,  visits:1 },
  { name:"Newark, NJ",         region:"usa", lat:40.736, lng:-74.172,  visits:1 },
  { name:"Casper, WY",         region:"usa", lat:42.866, lng:-106.313, visits:1 },
  { name:"Honolulu, HI",       region:"usa", lat:21.307, lng:-157.858, visits:1 },
  { name:"Kona, HI",           region:"usa", lat:19.640, lng:-155.996, visits:1 },
  { name:"Hilo, HI",           region:"usa", lat:19.724, lng:-155.090, visits:1 },
  { name:"Lihue, HI",          region:"usa", lat:21.978, lng:-159.370, visits:1 },

  // ── Canada ────────────────────────────────────────────────────
  { name:"Toronto, Canada",    region:"canada", lat:43.651, lng:-79.383, visits:3 },
  { name:"Lincoln, Ontario",   region:"canada", lat:43.147, lng:-79.444, visits:1 },
  { name:"St. Catharines, ON", region:"canada", lat:43.160, lng:-79.245, visits:1 },
  { name:"Calgary, Canada",    region:"canada", lat:51.045, lng:-114.072, visits:1 },
  { name:"Vancouver, Canada",  region:"canada", lat:49.246, lng:-123.116, visits:1 },
  { name:"Vancouver Island",   region:"canada", lat:49.650, lng:-125.450, visits:1 },

  // ── Iceland ───────────────────────────────────────────────────
  { name:"Reykjavík",          region:"iceland", lat:64.135, lng:-21.895, visits:6 },
  { name:"Ísafjörður",         region:"iceland", lat:66.075, lng:-23.135, visits:1 },
  { name:"Vestmannaeyjar",     region:"iceland", lat:63.441, lng:-20.270, visits:1 },
  { name:"Egilsstaðir",        region:"iceland", lat:65.269, lng:-14.394, visits:1 },
  { name:"Höfn",               region:"iceland", lat:64.254, lng:-15.212, visits:1 },
  { name:"Akureyri",           region:"iceland", lat:65.683, lng:-18.091, visits:1 },
  { name:"Dalvík",             region:"iceland", lat:65.971, lng:-18.528, visits:1 },
  { name:"Húsavík",            region:"iceland", lat:66.044, lng:-17.338, visits:1 },

  // ── Europe ────────────────────────────────────────────────────
  { name:"Breda, Netherlands", region:"europe", lat:51.589, lng:4.776,  visits:10 },
  { name:"Frankfurt, Germany", region:"europe", lat:50.110, lng:8.682,  visits:1 },
  { name:"Naples, Italy",      region:"europe", lat:40.851, lng:14.268, visits:1 },
  { name:"Venice, Italy",      region:"europe", lat:45.440, lng:12.315, visits:1 },
  { name:"Paris, France",      region:"europe", lat:48.853, lng:2.350,  visits:1 },
  { name:"Calais, France",     region:"europe", lat:50.951, lng:1.858,  visits:1 },
  { name:"Bergerac, France",   region:"europe", lat:44.852, lng:0.483,  visits:1 },
  { name:"Nantes, France",     region:"europe", lat:47.218, lng:-1.554, visits:1 },
  { name:"Madrid, Spain",      region:"europe", lat:40.416, lng:-3.703, visits:1 },
  { name:"Santander, Spain",   region:"europe", lat:43.463, lng:-3.800, visits:1 },
  { name:"Valladolid, Spain",  region:"europe", lat:41.652, lng:-4.724, visits:1 },
  { name:"Córdoba, Spain",     region:"europe", lat:37.888, lng:-4.779, visits:1 },
  { name:"Granada, Spain",     region:"europe", lat:37.177, lng:-3.598, visits:1 },
  { name:"Málaga, Spain",      region:"europe", lat:36.721, lng:-4.421, visits:1 },
  { name:"Valencia, Spain",    region:"europe", lat:39.470, lng:-0.376, visits:1 },
  { name:"León, Spain",        region:"europe", lat:42.599, lng:-5.571, visits:1 },
  { name:"Lanzarote (Matagorda)", region:"europe", lat:28.934, lng:-13.610, visits:1 },

  // ── Australia ─────────────────────────────────────────────────
  { name:"Sydney, Australia",      region:"australia", lat:-33.869, lng:151.209, visits:1 },
  { name:"Pialba (Hervey Bay)",    region:"australia", lat:-25.289, lng:152.851, visits:1 },
  { name:"Brisbane, Australia",    region:"australia", lat:-27.469, lng:153.024, visits:1 },
  { name:"Warrnambool, Australia", region:"australia", lat:-38.383, lng:142.488, visits:1 },
  { name:"Attwood (Melbourne)",    region:"australia", lat:-37.678, lng:144.913, visits:1 },
  { name:"Melbourne, Australia",   region:"australia", lat:-37.814, lng:144.963, visits:1 },
  { name:"Alice Springs",          region:"australia", lat:-23.698, lng:133.881, visits:1 },
  { name:"Uluru",                  region:"australia", lat:-25.344, lng:131.036, visits:1 },

  // ── Americas (rest of world) ───────────────────────────────────
  { name:"San José, Costa Rica",   region:"americas", lat:9.934,  lng:-84.088, visits:1 },
  { name:"Bangkok, Thailand",      region:"asia",     lat:13.754, lng:100.502, visits:1 },
];

// Count unique countries
const countries = new Set();
places.forEach(p => {
  if (p.region === 'uk') countries.add('UK/Guernsey');
  else if (p.region === 'usa') countries.add('USA');
  else if (p.region === 'canada') countries.add('Canada');
  else if (p.region === 'iceland') countries.add('Iceland');
  else if (p.region === 'australia') countries.add('Australia');
  else if (p.region === 'americas') countries.add('Costa Rica');
  else if (p.region === 'asia') countries.add('Thailand');
  else if (p.name.includes('Netherlands')) countries.add('Netherlands');
  else if (p.name.includes('Germany')) countries.add('Germany');
  else if (p.name.includes('Italy')) countries.add('Italy');
  else if (p.name.includes('France')) countries.add('France');
  else if (p.name.includes('Spain') || p.name.includes('Lanzarote')) countries.add('Spain');
});

document.getElementById('total-places').textContent = places.length;
document.getElementById('total-countries').textContent = countries.size;

// Init map
const map = L.map('map', {
  center: [30, 0],
  zoom: 2,
  zoomControl: true,
  minZoom: 1,
});

L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
  attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
  subdomains: 'abcd',
  maxZoom: 19
}).addTo(map);

const markerLayer = {};
const allMarkers = [];

places.forEach(place => {
  const color = REGION_COLORS[place.region] || '#aaa';
  const marker = L.marker([place.lat, place.lng], { icon: makeIcon(color) });

  const visitText = place.visits > 1
    ? `<div class="popup-visits">✦ ${place.visits} visits</div>`
    : '';

  marker.bindPopup(`
    <div class="popup-name">${place.name}</div>
    <div class="popup-region">${place.region.toUpperCase()}</div>
    ${visitText}
  `, { maxWidth: 180 });

  marker.addTo(map);
  marker._region = place.region;
  allMarkers.push(marker);

  if (!markerLayer[place.region]) markerLayer[place.region] = [];
  markerLayer[place.region].push(marker);
});

function filterRegion(region, btn) {
  document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');

  allMarkers.forEach(m => {
    if (region === 'all' || m._region === region) {
      if (!map.hasLayer(m)) map.addLayer(m);
    } else {
      if (map.hasLayer(m)) map.removeLayer(m);
    }
  });
}
</script>
</body>
</html>