<div class="globe-container">
  <canvas
    id="cobe"
    style="width: 500px; height: 500px"
    width="1000"
    height="1000"
  ></canvas>
</div>

<style>
.globe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}
</style>

<script type="module">
  import createGlobe from 'https://cdn.skypack.dev/cobe'

  let phi = 0
  let canvas = document.getElementById("cobe")

  // Detect system dark mode
  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

  const globe = createGlobe(canvas, {
    devicePixelRatio: 2,
    width: 1000,
    height: 1000,
    phi: 0,
    theta: 0.3,
    dark: isDarkMode ? 1 : 0,
    diffuse: 1.2,
    scale: 1,
    mapSamples: 16000,
    mapBrightness: isDarkMode ? 15 : 4,
    baseColor: isDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3],
    markerColor: [0.1, 0.8, 1],
    glowColor: isDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2],
    offset: [0, 0],
    markers: [
      { location: [37.7595, -122.4367], size: 0.03 },
      { location: [40.7128, -74.006], size: 0.1 },
    ],
    onRender: (state) => {
      state.phi = phi
      phi += 0.005
    },
  })

  // Listen for system theme changes
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newIsDarkMode = e.matches
    globe.dark = newIsDarkMode ? 1 : 0
    globe.baseColor = newIsDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3]
    globe.mapBrightness = newIsDarkMode ? 15 : 4
    globe.glowColor = newIsDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2]
  })
</script>