teams.js

/**
 * Team section: city tabs (Shiraz active / Tehran & Bandar inactive) + alumni.
 * Data: data/teams.json
 */
(function () {
  'use strict';

  var root = document.getElementById('team-app');
  if (!root) return;

  var PLACEHOLDER = 'assets/img/team/placeholder.svg';

  function esc(s) {
    if (window.FingerCoder && FingerCoder.escapeHtml) {
      return FingerCoder.escapeHtml(s);
    }
    return String(s == null ? '' : s)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  function imgSrc(path) {
    return path && path.length ? path : PLACEHOLDER;
  }

  function memberCard(m, kind) {
    var hasLink = m.linkedin && m.linkedin.length > 3;
    var linkedinBtn = hasLink
      ? '<a class="team-social-btn" href="' +
        esc(m.linkedin) +
        '" target="_blank" rel="noopener noreferrer" aria-label="لینکدین ' +
        esc(m.name) +
        '"><i class="lni-linkedin-filled" aria-hidden="true"></i></a>'
      : '';
    var badge = m.badge
      ? '<span class="team-badge">' + esc(m.badge) + '</span>'
      : '';
    var showDuration = m.duration && m.duration !== '—' && m.duration !== '-';
    var duration = showDuration
      ? '<span class="alumni-duration"><i class="lni-timer" aria-hidden="true"></i> ' +
        esc(m.duration) +
        '</span>'
      : '';
    var period = m.period
      ? '<span class="alumni-period">' + esc(m.period) + '</span>'
      : '';
    var nameHtml = hasLink
      ? '<a href="' +
        esc(m.linkedin) +
        '" target="_blank" rel="noopener noreferrer">' +
        esc(m.name) +
        '</a>'
      : esc(m.name);
    var src = esc(imgSrc(m.image));
    var isPlaceholder = !m.image || m.image.indexOf('placeholder') !== -1;

    if (kind === 'alumni') {
      return (
        '<article class="alumni-card' +
        (isPlaceholder ? ' is-placeholder' : '') +
        '">' +
        '<div class="alumni-photo">' +
        '<img src="' +
        src +
        '" alt="تصویر ' +
        esc(m.name) +
        ' — ' +
        esc(m.role) +
        ' (تیم سابق فینگرکدر)" loading="lazy" decoding="async" width="200" height="200">' +
        '<span class="alumni-ribbon">سابق</span>' +
        '</div>' +
        '<div class="alumni-body">' +
        period +
        '<h3 class="alumni-name">' +
        nameHtml +
        '</h3>' +
        '<p class="alumni-role">' +
        esc(m.role) +
        '</p>' +
        '<div class="alumni-meta">' +
        duration +
        linkedinBtn +
        '</div>' +
        '</div>' +
        '</article>'
      );
    }

    return (
      '<article class="team-card' +
      (isPlaceholder ? ' is-placeholder' : '') +
      '">' +
      '<div class="team-card-photo">' +
      '<img src="' +
      src +
      '" alt="تصویر ' +
      esc(m.name) +
      ' — ' +
      esc(m.role) +
      ' فینگرکدر" loading="lazy" decoding="async" width="320" height="320">' +
      badge +
      (hasLink
        ? '<div class="team-card-overlay">' + linkedinBtn + '</div>'
        : '') +
      '</div>' +
      '<div class="team-card-body">' +
      '<h3 class="team-card-name">' +
      nameHtml +
      '</h3>' +
      '<p class="team-card-role">' +
      esc(m.role) +
      '</p>' +
      (isPlaceholder
        ? '<p class="team-card-note">سمت و تصویر به‌زودی</p>'
        : '') +
      '</div>' +
      '</article>'
    );
  }

  function inactiveCity(city, joinUrl) {
    return (
      '<div class="team-empty team-inactive">' +
      '<div class="team-empty-icon" aria-hidden="true">' +
      esc(city.emoji || '👥') +
      '</div>' +
      '<span class="team-status-pill">فعلاً غیرفعال</span>' +
      '<h3>تیم اجرایی ' +
      esc(city.name) +
      '</h3>' +
      '<p>' +
      esc(
        city.tagline ||
          'این شعبه فعلاً فعال نیست. به‌زودی اعضای جدید معرفی می‌شوند.'
      ) +
      '</p>' +
      '<p class="team-empty-sub">اگر می‌خواهید راه‌اندازی مجدد این شعبه را کمک کنید:</p>' +
      '<a class="btn btn-common" href="' +
      esc(joinUrl) +
      '" target="_blank" rel="noopener noreferrer">پیوستن به تیم اجرایی</a>' +
      '</div>'
    );
  }

  function emptyActive(city, joinUrl) {
    return (
      '<div class="team-empty">' +
      '<div class="team-empty-icon" aria-hidden="true">' +
      esc(city.emoji || '👥') +
      '</div>' +
      '<h3>جای شما در تیم ' +
      esc(city.name) +
      ' خالی است</h3>' +
      '<p>برای عضویت داوطلبانه در تیم اجرایی درخواست بدهید.</p>' +
      '<a class="btn btn-common" href="' +
      esc(joinUrl) +
      '" target="_blank" rel="noopener noreferrer">عضویت در تیم ' +
      esc(city.name) +
      '</a>' +
      '</div>'
    );
  }

  function renderCityPanel(city, joinUrl) {
    var members = city.members || [];
    var isActive = city.active !== false;
    var body;

    if (!isActive) {
      body = inactiveCity(city, joinUrl);
    } else if (members.length === 0) {
      body = emptyActive(city, joinUrl);
    } else {
      body =
        '<div class="team-cards-grid">' +
        members
          .map(function (m) {
            return memberCard(m, 'active');
          })
          .join('') +
        '</div>';
    }

    return (
      '<div class="team-city-panel" id="team-panel-' +
      esc(city.id) +
      '" role="tabpanel" data-city="' +
      esc(city.id) +
      '" hidden>' +
      (isActive && members.length
        ? '<p class="team-city-tagline">' + esc(city.tagline || '') + '</p>'
        : '') +
      body +
      '</div>'
    );
  }

  function renderAlumni(former) {
    if (!former || !former.length) return '';

    // Group by period/city for filters
    var periods = {};
    former.forEach(function (m) {
      var p = m.period || 'سایر';
      periods[p] = true;
    });
    var periodList = Object.keys(periods);

    var filterBtns =
      '<div class="alumni-filters" role="group" aria-label="فیلتر تیم سابق">' +
      '<button type="button" class="alumni-filter-btn active" data-alumni-filter="all">همه (' +
      former.length +
      ')</button>' +
      periodList
        .map(function (p) {
          var n = former.filter(function (m) {
            return (m.period || 'سایر') === p;
          }).length;
          return (
            '<button type="button" class="alumni-filter-btn" data-alumni-filter="' +
            esc(p) +
            '">' +
            esc(p) +
            ' (' +
            n +
            ')</button>'
          );
        })
        .join('') +
      '</div>';

    var cards = former
      .map(function (m) {
        return (
          '<div class="alumni-item" data-alumni-period="' +
          esc(m.period || 'سایر') +
          '">' +
          memberCard(m, 'alumni') +
          '</div>'
        );
      })
      .join('');

    return (
      '<div class="alumni-section" id="team-alumni">' +
      '<div class="alumni-header">' +
      '<div class="alumni-header-text">' +
      '<span class="alumni-kicker">قدردانی از پیشگامان</span>' +
      '<h2 class="alumni-title">تیم اجرایی سابق</h2>' +
      '<p class="alumni-desc">این افراد مسیر فینگرکدر را در شیراز، تهران و بندرعباس ساختند. نام و نقش‌شان اینجاست تا سهم داوطلبانه‌شان فراموش نشود.</p>' +
      '</div>' +
      '<div class="alumni-stat">' +
      '<span class="alumni-stat-num">' +
      former.length +
      '</span>' +
      '<span class="alumni-stat-label">همکار سابق</span>' +
      '</div>' +
      '</div>' +
      filterBtns +
      '<div class="alumni-grid">' +
      cards +
      '</div>' +
      '</div>'
    );
  }

  function renderShell(data) {
    var cities = data.cities || [];
    var joinUrl = data.joinUrl || 'https://formafzar.com/form/nc9eg';

    var tabs = cities
      .map(function (c, i) {
        var countLabel;
        if (c.active === false) {
          countLabel = 'غیرفعال';
        } else if (c.members && c.members.length) {
          countLabel = c.members.length + ' نفر';
        } else {
          countLabel = 'به‌زودی';
        }
        return (
          '<button type="button" class="team-tab' +
          (i === 0 ? ' active' : '') +
          (c.active === false ? ' is-inactive-tab' : '') +
          '" role="tab" aria-selected="' +
          (i === 0 ? 'true' : 'false') +
          '" data-city-tab="' +
          esc(c.id) +
          '" id="team-tab-' +
          esc(c.id) +
          '">' +
          '<span class="team-tab-emoji" aria-hidden="true">' +
          esc(c.emoji || '') +
          '</span>' +
          '<span class="team-tab-label">' +
          esc(c.name) +
          '</span>' +
          '<span class="team-tab-count">' +
          countLabel +
          '</span>' +
          '</button>'
        );
      })
      .join('');

    var panels = cities
      .map(function (c) {
        return renderCityPanel(c, joinUrl);
      })
      .join('');

    return (
      '<div class="team-city-tabs" role="tablist" aria-label="شهرهای تیم اجرایی">' +
      tabs +
      '</div>' +
      '<div class="team-city-panels">' +
      panels +
      '</div>' +
      renderAlumni(data.former || []) +
      '<div class="team-join-banner">' +
      '<p>جای شما در تیم داوطلبانه فینگرکدر خالی است</p>' +
      '<a class="btn btn-common" href="' +
      esc(joinUrl) +
      '" target="_blank" rel="noopener noreferrer">درخواست عضویت در تیم اجرایی</a>' +
      '</div>'
    );
  }

  function activateCity(cityId) {
    root.querySelectorAll('[data-city-tab]').forEach(function (btn) {
      var on = btn.getAttribute('data-city-tab') === cityId;
      btn.classList.toggle('active', on);
      btn.setAttribute('aria-selected', on ? 'true' : 'false');
    });
    root.querySelectorAll('.team-city-panel').forEach(function (panel) {
      var on = panel.getAttribute('data-city') === cityId;
      if (on) panel.removeAttribute('hidden');
      else panel.setAttribute('hidden', '');
    });
  }

  function bindAlumniFilters() {
    var filters = root.querySelector('.alumni-filters');
    if (!filters) return;
    filters.addEventListener('click', function (e) {
      var btn = e.target.closest('[data-alumni-filter]');
      if (!btn) return;
      var val = btn.getAttribute('data-alumni-filter');
      filters.querySelectorAll('.alumni-filter-btn').forEach(function (b) {
        b.classList.toggle('active', b === btn);
      });
      root.querySelectorAll('.alumni-item').forEach(function (item) {
        var show =
          val === 'all' || item.getAttribute('data-alumni-period') === val;
        item.style.display = show ? '' : 'none';
      });
    });
  }

  function bind(data) {
    root.addEventListener('click', function (e) {
      var tab = e.target.closest('[data-city-tab]');
      if (!tab) return;
      activateCity(tab.getAttribute('data-city-tab'));
    });

    var first = (data.cities && data.cities[0] && data.cities[0].id) || 'shiraz';
    activateCity(first);

    var params = new URLSearchParams(location.search);
    var city =
      params.get('city') ||
      (location.hash || '').replace('#team-', '').replace('#', '');
    if (
      city &&
      data.cities.some(function (c) {
        return c.id === city;
      })
    ) {
      activateCity(city);
    }

    bindAlumniFilters();
  }

  function load() {
    var fetchFn =
      window.FingerCoder && FingerCoder.fetchJSON
        ? FingerCoder.fetchJSON
        : function (url) {
            return fetch(url).then(function (r) {
              return r.json();
            });
          };

    fetchFn('data/teams.json')
      .then(function (data) {
        root.innerHTML = renderShell(data);
        bind(data);
      })
      .catch(function (err) {
        console.error(err);
        root.innerHTML =
          '<p class="text-center">خطا در بارگذاری تیم. لطفاً صفحه را تازه کنید.</p>';
      });
  }

  load();
})();