// The Plants page — Sacred Plant Teachers.
//
// A respectful catalog of plant medicines that human cultures have
// relied on for vision, healing, ritual, and consciousness work for
// thousands of years. Each card opens to: traditional context, what it
// teaches, the warning, what it asks of you. No "use this to get high"
// framing — these are teachers, not toys.

(function () {
  const root = document.getElementById("plants");
  if (!root) return;

  const t = (k, fb) => (window.i18n && window.i18n.t) ? window.i18n.t(k, fb) : fb;

  const PLANTS = [
    "cannabis", "psilocybin", "ayahuasca", "dmt", "peyote", "san_pedro",
    "iboga", "salvia", "blue_lotus", "datura", "kratom", "mdma"
  ];

  const gridEl = root.querySelector(".pl-grid");
  const detailsEl = root.querySelector(".pl-details");

  PLANTS.forEach((id) => {
    const card = document.createElement("button");
    card.type = "button";
    card.className = "pl-card";
    card.dataset.id = id;
    card.innerHTML =
      '<span class="pl-card-name" data-i18n="page.plants.pl_' + id + '_name">' + id + '</span>' +
      '<span class="pl-card-orig" data-i18n="page.plants.pl_' + id + '_orig">…</span>';
    gridEl.appendChild(card);
  });

  let selected = null;
  function show(id) {
    detailsEl.innerHTML =
      '<div class="pl-d-head">' +
        '<span class="pl-d-name">' + t("page.plants.pl_" + id + "_name", id) + '</span>' +
        '<span class="pl-d-orig">' + t("page.plants.pl_" + id + "_orig", "") + '</span>' +
      '</div>' +
      '<div class="pl-d-block"><span class="pl-d-label">'
        + t("page.plants.pl_teaches", "What it teaches") + '</span>'
        + '<span class="pl-d-body">' + t("page.plants.pl_" + id + "_teaches", "") + '</span></div>' +
      '<div class="pl-d-block"><span class="pl-d-label">'
        + t("page.plants.pl_warns", "The warning") + '</span>'
        + '<span class="pl-d-body">' + t("page.plants.pl_" + id + "_warns", "") + '</span></div>' +
      '<div class="pl-d-block"><span class="pl-d-label">'
        + t("page.plants.pl_asks", "What it asks of you") + '</span>'
        + '<span class="pl-d-body">' + t("page.plants.pl_" + id + "_asks", "") + '</span></div>';
    detailsEl.classList.add("visible");
  }
  gridEl.addEventListener("click", (e) => {
    const card = e.target.closest(".pl-card");
    if (!card) return;
    if (card === selected) {
      selected.classList.remove("active");
      selected = null;
      detailsEl.classList.remove("visible");
      return;
    }
    if (selected) selected.classList.remove("active");
    selected = card; card.classList.add("active");
    show(card.dataset.id);
  });
  window.addEventListener("langchange", () => { if (selected) show(selected.dataset.id); });
})();
