/* ============================================================
   HARAMBEE — members data + grid/detail rendering
   Placeholder roles/bios/photos — edit freely; real member
   photos go in assets/img/members/<slug>.jpg (override the
   monogram automatically).
   ============================================================ */
(function () {
  "use strict";

  /* ---------- Member data (PLACEHOLDER role/business/bio) ---------- */
  const MEMBERS = [
    { slug: "andrea-popa", name: "Andrea Popa",
      role_ro: "Președinte", role_en: "President",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "veniamin-negru", name: "Veniamin Negru",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "marta-panco", name: "Marta Panco",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "nicoleta-tilinca", name: "Nicoleta Tilinca",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "francu-lidia-valentina", name: "Frâncu Lidia Valentina",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "carmen-ogweno", name: "Carmen Ogweno",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "mihaela-istrate-anghel", name: "Mihaela Istrate – Anghel",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "corneliu-ghinia", name: "Corneliu Ghinia",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "mihaita-adrian-ignat", name: "Mihăiță Adrian Ignat",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." },
    { slug: "stephen-ongeri", name: "Stephen Ongeri",
      role_ro: "Membru fondator", role_en: "Founding member",
      business_ro: "—", business_en: "—",
      bio_ro: "Text de prezentare în curs de completare.",
      bio_en: "Member bio coming soon." }
  ];

  window.MEMBERS = MEMBERS;

  /* ---------- Helpers ---------- */
  const PALETTE = ["#1f4fae", "#b0343c", "#2f8f4e", "#c9a227", "#5a3fa0", "#0f8a8a"];

  function initials(name) {
    const parts = name.replace(/[–—-]/g, " ").split(/\s+/).filter(Boolean);
    const a = parts[0] ? parts[0][0] : "";
    const b = parts[1] ? parts[1][0] : "";
    return (a + b).toUpperCase();
  }

  function colorFor(name) {
    let h = 0;
    for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
    return PALETTE[h % PALETTE.length];
  }

  function monogramURI(name) {
    const c = colorFor(name);
    const svg =
      '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">' +
      '<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">' +
      '<stop offset="0" stop-color="' + c + '"/>' +
      '<stop offset="1" stop-color="#0b1110"/></linearGradient></defs>' +
      '<rect width="300" height="300" fill="url(#g)"/>' +
      '<text x="50%" y="52%" fill="#fdf1e1" font-family="Georgia, serif" font-size="120" ' +
      'font-weight="500" text-anchor="middle" dominant-baseline="central">' + initials(name) + "</text></svg>";
    return "data:image/svg+xml;utf8," + encodeURIComponent(svg);
  }

  function avatarMarkup(m, cls) {
    const mono = monogramURI(m.name);
    const src = m.photo ? m.photo : mono;
    /* data-mono lets us fall back to the monogram if a real photo 404s
       (wired via JS in wireAvatarFallbacks — no inline handler, CSP-clean) */
    return '<img class="' + cls + '" src="' + src + '" alt="' + m.name +
      '" loading="lazy" data-mono="' + mono.replace(/"/g, "%22") + '" />';
  }

  function wireAvatarFallbacks(root) {
    (root || document).querySelectorAll("img[data-mono]").forEach(function (img) {
      img.addEventListener("error", function handler() {
        img.removeEventListener("error", handler);
        img.src = img.getAttribute("data-mono");
      });
    });
  }

  const t = function (key) {
    const H = window.HARAMBEE;
    const lang = H ? H.currentLang() : (document.documentElement.lang || "ro");
    return H && H.i18n[lang] && H.i18n[lang][key] != null ? H.i18n[lang][key] : key;
  };
  const lang = function () {
    return (window.HARAMBEE ? window.HARAMBEE.currentLang() : document.documentElement.lang) === "en" ? "en" : "ro";
  };

  /* ---------- Grid (members.html) ---------- */
  function renderGrid() {
    const grid = document.getElementById("members-grid");
    if (!grid) return;
    const L = lang();
    grid.innerHTML = MEMBERS.map(function (m) {
      return '<a class="member-card" href="member.html?m=' + m.slug + '">' +
        '<span class="member-accent" aria-hidden="true"></span>' +
        avatarMarkup(m, "member-avatar") +
        '<span class="member-name">' + m.name + "</span>" +
        '<span class="member-role">' + (L === "en" ? m.role_en : m.role_ro) + "</span>" +
        "</a>";
    }).join("");
    wireAvatarFallbacks(grid);
  }

  /* ---------- Detail (member.html) ---------- */
  function renderDetail() {
    const wrap = document.getElementById("member-detail");
    if (!wrap) return;
    const L = lang();
    const params = new URLSearchParams(location.search);
    const slug = params.get("m");
    const m = MEMBERS.filter(function (x) { return x.slug === slug; })[0];

    if (!m) {
      wrap.innerHTML = '<p class="member-notfound">' + t("member_notfound") + "</p>" +
        '<a class="members-back" href="members.html">' + t("members_back") + "</a>";
      return;
    }
    document.title = m.name + " — " + t("logo");
    wrap.innerHTML =
      '<a class="members-back" href="members.html">' + t("members_back") + "</a>" +
      '<div class="member-detail-head">' +
        avatarMarkup(m, "member-detail-avatar") +
        '<div class="member-detail-meta">' +
          "<h1>" + m.name + "</h1>" +
          '<p class="member-detail-role">' + (L === "en" ? m.role_en : m.role_ro) + "</p>" +
          '<p class="member-detail-business"><span class="fld-label">' + t("member_business_label") +
            '</span> ' + (L === "en" ? m.business_en : m.business_ro) + "</p>" +
        "</div>" +
      "</div>" +
      '<p class="member-bio">' + (L === "en" ? m.bio_en : m.bio_ro) + "</p>";
    wireAvatarFallbacks(wrap);
  }

  function renderAll() { renderGrid(); renderDetail(); }

  function boot() {
    renderAll();
    document.addEventListener("harambee:langchange", renderAll);
  }
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
  else boot();
})();
