{% extends "main.html" %}
{% block tabs %}
{{ super() }}
<section id="hero-container" class="mdx-container">
    <div id="hero-card" class="mdx-hero md-typeset">
      <!-- Hero Image -->
      <div id="hero-logo" class="mdx-hero__image">
        <img src="assets/dodlogo_transparent.png" alt="Designing Open Democracy Logo">
      </div>

      <!-- Hero Title -->
      <div class="mdx-hero__content">
        <h1 id="hero-title">Designing Open Democracy</h1>
        <p id="hero-subtitle">Think Outside The Ballot Box</p>
        <p id="hero-pitch">A nonpartisan community of engineers, social architects, and philosophers asking how design and technology can make democracy work better — from local cooperatives to national governments.</p>
        <div id="hero-cta">
          <a class="hero-cta-btn hero-cta-primary" href="/community/community/">Get involved</a>
          <a class="hero-cta-btn" href="/organisations/">Democracy Landscape</a>
          <a class="hero-cta-btn" href="/blog/">Blog</a>
        </div>
      </div>
  </div>
</section>
<!-- Active Projects -->
<section id="projects-container" class="mdx-container">
  <div id="projects-card" class="mdx-hero md-typeset">
    <h1 id="projects-title">Active Projects</h1>
    <p id="projects-subtitle">What our members are building</p>
    <div id="projects-grid">
      {%- for file in pages %}
        {%- if file.page and file.page.meta.status == 'active' and file.page.url.startswith('projects/') %}
        <a class="project-card" href="/{{ file.page.url }}">
          <h3>{{ file.page.title }}</h3>
          {%- if file.page.meta.summary %}
          <p>{{ file.page.meta.summary }}</p>
          {%- endif %}
        </a>
        {%- endif %}
      {%- endfor %}
    </div>
  </div>
</section>
<!-- Democracy Map: blog activity markers + organisation landscape markers -->
<section id="activity-map-container" class="mdx-container">
  <div id="activity-map-card" class="mdx-hero md-typeset">
    <h1 id="activity-map-title">Democracy Map</h1>
    <p id="activity-map-subtitle">Activities and organisations</p>
    <div id="map-wrapper">
      <div class="leaflet-container" id="map"></div>
      <button id="map-expand-btn" aria-label="Expand map">⛶</button>
    </div>
    <p id="map-hint">Click a marker for details · Scroll to zoom · ⛶ to expand</p>
    <p id="map-footer"><a href="/organisations/">View all organisations →</a></p>
  </div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const map = L.map('map', { scrollWheelZoom: true }).setView([-27.41, 134.77], 3);

  const mapWrapper = document.getElementById('map-wrapper');
  const mapSection = document.getElementById('activity-map-container');
  const expandBtn = document.getElementById('map-expand-btn');
  const mapHint = document.getElementById('map-hint');

  function setExpanded(expand) {
    mapWrapper.classList.toggle('is-expanded', expand);
    // Release the isolation stacking context so the fixed overlay clears the nav bar
    mapSection.style.isolation = expand ? 'auto' : '';
    expandBtn.textContent = expand ? '✕' : '⛶';
    expandBtn.setAttribute('aria-label', expand ? 'Collapse map' : 'Expand map');
    mapHint.textContent = expand
      ? 'Scroll to zoom · Esc to close'
      : 'Click a marker for details · Scroll to zoom · ⛶ to expand';
    setTimeout(() => map.invalidateSize(), 50);
  }

  expandBtn.addEventListener('click', function() {
    setExpanded(!mapWrapper.classList.contains('is-expanded'));
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && mapWrapper.classList.contains('is-expanded')) {
      setExpanded(false);
    }
  });
  const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  // Function to calculate fade based on post date
  function getFadeRatioBasedOnTime(postDateStr) {
    const postDate = new Date(postDateStr);
    const currentDate = new Date();
    const oneYear = 365 * 24 * 60 * 60 * 1000; // milliseconds in one year
    const fadeDuration = oneYear * 2;
    const timeDiff = currentDate - postDate;
    const fadeRatio = Math.min(timeDiff / fadeDuration, 1); // Ensure it doesn't exceed 1
    return fadeRatio;
  }

  // Add blog activity map
  var myFGMarker = new L.MarkerClusterGroup();

  {%- for file in pages %}
    {%- if file.page and file.page.url.startswith('blog/') and file.page.meta.location and file.page.meta.location.latitude and file.page.meta.location.longitude %}
      {
        var marker = L.marker([{{ file.page.meta.location.latitude }}, {{ file.page.meta.location.longitude }}], {
            opacity: 1.0 - getFadeRatioBasedOnTime('{{ file.page.meta.date }}') / 2
          })
          .bindPopup(`
            <a style="font-weight:bold" href="/{{ file.page.url }}">{{ file.page.title }}</a>
            <br/> <i>{{ file.page.meta.date }}</i>
            <br/> {{ file.page.meta.location.name }}
            {%- if file.page.meta.location.description %}
              <br/> {{ file.page.meta.location.description }}
            {%- endif %}
            {%- if file.page.meta.location.address %}
              <br/> <a target="_new" href="https://www.openstreetmap.org/?mlat={{ file.page.meta.location.latitude }}&mlon={{ file.page.meta.location.longitude }}">{{ file.page.meta.location.address }}</a>
            {%- endif %}
          `);
        myFGMarker.addLayer(marker);
      }
    {%- endif %}
  {%- endfor %}

  map.addLayer(myFGMarker);

  // Deterministic per-org jitter for approximate (precision: city) org locations —
  // spreads pins that would otherwise sit exactly on top of each other (a shared
  // city-centroid guess, not a real address — see CLAUDE.md's location: convention)
  // onto a small ring around the stated point. Seeded from the org's own URL so the
  // same org always lands in the same spot across reloads/builds rather than jumping
  // around, without needing to coordinate with whichever other orgs share that point.
  function seededUnit(seedStr) {
    var h = 0;
    for (var i = 0; i < seedStr.length; i++) {
      h = (h * 31 + seedStr.charCodeAt(i)) | 0;
    }
    return (Math.abs(h) % 3600) / 3600; // [0, 1)
  }
  var JITTER_RADIUS_DEG = 0.015; // ~1.6km — visible once zoomed to city level, still reads as "this city"
  function jitterLatLng(lat, lon, seedStr) {
    // Spread across a filled disk (angle + radius both seeded, independently
    // salted) rather than just a ring — two orgs need to collide on BOTH axes
    // to land close together, not just share a similar hash bucket on one.
    var angle = seededUnit(seedStr + ':angle') * 2 * Math.PI;
    var radius = JITTER_RADIUS_DEG * (0.35 + 0.65 * seededUnit(seedStr + ':radius'));
    var lonScale = Math.cos(lat * Math.PI / 180) || 1;
    return [
      lat + radius * Math.cos(angle),
      lon + (radius * Math.sin(angle)) / lonScale
    ];
  }

  // Organisation markers — active orgs with location data
  var orgTypeIcons = {
    research: '🔬', education: '🔬',
    advocacy: '📢',
    platform: '💻', civic_tech: '💻',
    practice: '🤝', philanthropy: '🤝', cooperative: '🤝',
    party: '🗳️', political_party: '🗳️', 'political-party': '🗳️', political_movement: '🗳️',
    governance: '⚖️', government: '⚖️',
  };
  function makeOrgIcon(type, logo, approximate, logoBg) {
    var approxClass = approximate ? ' org-map-icon-approx' : '';
    var darkClass = (logoBg === 'dark') ? ' org-logo-needs-dark' : '';
    if (logo) {
      return L.divIcon({
        html: '<img src="' + logo + '" alt="" loading="lazy">',
        className: 'org-map-icon org-map-icon-logo' + approxClass + darkClass,
        iconSize: [30, 30],
        iconAnchor: [15, 15],
        popupAnchor: [0, -15]
      });
    }
    return L.divIcon({
      html: orgTypeIcons[type] || '🏛️',
      className: 'org-map-icon' + approxClass,
      iconSize: [28, 28],
      iconAnchor: [14, 14],
      popupAnchor: [0, -14]
    });
  }
  var orgMarkers = new L.MarkerClusterGroup();

  {%- for file in pages %}
    {%- if file.page and file.page.meta.location and file.page.meta.location.latitude and file.page.meta.location.longitude and file.page.url.startswith('organisations/') and file.page.meta.status == 'active' %}
      {
        var approximate = {{ (file.page.meta.location.precision == 'city') | tojson }};
        var latLng = approximate
          ? jitterLatLng({{ file.page.meta.location.latitude }}, {{ file.page.meta.location.longitude }}, {{ file.page.url | tojson }})
          : [{{ file.page.meta.location.latitude }}, {{ file.page.meta.location.longitude }}];
        var marker = L.marker(
          latLng,
          { icon: makeOrgIcon('{{ file.page.meta.type }}', {{ (file.page.meta.logo or '') | tojson }}, approximate, {{ (file.page.meta.logo_bg or '') | tojson }}) }
        ).bindPopup(`
          <a style="font-weight:bold" href="/{{ file.page.url }}">{{ file.page.title }}</a>
          <br/><i>{{ file.page.meta.type }}{% if file.page.meta.country %} · {{ file.page.meta.country }}{% endif %}</i>
          {%- if file.page.meta.location.name %}
            <br/>${approximate ? '~ near ' : ''}{{ file.page.meta.location.name }}
          {%- endif %}
          ${approximate ? '<br/><span class="org-map-approx-note">Approximate — precise address not confirmed</span>' : ''}
          {%- if file.page.meta.website %}
            <br/><a target="_blank" href="{{ file.page.meta.website }}">Website ↗</a>
          {%- endif %}
        `);
        orgMarkers.addLayer(marker);
      }
    {%- endif %}
  {%- endfor %}

  map.addLayer(orgMarkers);

  L.control.layers(null, {
    "Activities": myFGMarker,
    "Organisations": orgMarkers
  }, { collapsed: false, position: 'topleft' }).addTo(map);

  // Organisation type legend
  var legend = L.control({ position: 'bottomright' });
  legend.onAdd = function() {
    var div = L.DomUtil.create('div', 'map-legend');
    div.innerHTML =
      '<strong>Organisation type</strong>' +
      [['🔬','Research'],['📢','Advocacy'],['💻','Technology'],
       ['🤝','Practice'],['🗳️','Political'],['⚖️','Governance']]
      .map(function(c){ return '<div>' + c[0] + ' ' + c[1] + '</div>'; }).join('') +
      '<div class="map-legend-approx-note">Dashed pin = approximate location</div>';
    return div;
  };
  legend.addTo(map);

  var allLayers = myFGMarker.getLayers().concat(orgMarkers.getLayers());
  if (allLayers.length > 0) {
    map.fitBounds(L.featureGroup(allLayers).getBounds(), {padding: [50, 50]});
  }
});
</script>
{% endblock %}