/*
  The Little Green Cart app script
  ------------------------------------------------------------
  Dependency-free helpers for the local review build.

  Responsibilities:
  1. Toggle the mobile navigation menu.
  2. Load editable content from src/data/site-content.json.
  3. Render repeatable cards for plants, promotions, guides and supporters.
*/

(function () {
  "use strict";

  const menuButton = document.querySelector(".menu-toggle");
  const nav = document.querySelector("#main-nav");

  if (menuButton && nav) {
    menuButton.addEventListener("click", function () {
      const isOpen = nav.classList.toggle("is-open");
      menuButton.setAttribute("aria-expanded", String(isOpen));
    });

    nav.addEventListener("click", function (event) {
      if (event.target.tagName === "A") {
        nav.classList.remove("is-open");
        menuButton.setAttribute("aria-expanded", "false");
      }
    });
  }

  async function loadSiteContent() {
    try {
      const response = await fetch("src/data/site-content.json");

      if (!response.ok) {
        throw new Error("Could not load site-content.json");
      }

      const content = await response.json();
      renderImageCards("#plant-cards", content.plantCategories || []);
      renderPromotionCards("#promotion-cards", content.promotions || []);
      renderContentCards("#guide-cards", content.growingGuides || []);
      renderContentCards("#pain-cards", content.growingPains || []);
      renderContentCards("#supporter-cards", content.supporters || []);
    } catch (error) {
      // The HTML still carries the core story if JSON fails during local review.
      console.warn("Content JSON not loaded:", error);
    }
  }

  function renderImageCards(selector, items) {
    const container = document.querySelector(selector);

    if (!container) {
      return;
    }

    container.innerHTML = items
      .map(function (item) {
        return `
          <article class="image-card">
            <img src="public/${escapeAttribute(item.image)}" alt="${escapeAttribute(item.alt || item.title)}">
            <div class="image-card__body">
              <h3>${escapeHtml(item.title)}</h3>
              <p>${escapeHtml(item.text)}</p>
            </div>
          </article>
        `;
      })
      .join("");
  }

  function renderContentCards(selector, items) {
    const container = document.querySelector(selector);

    if (!container) {
      return;
    }

    container.innerHTML = items
      .map(function (item) {
        return `
          <article class="content-card">
            <h3>${escapeHtml(item.title)}</h3>
            <p>${escapeHtml(item.text)}</p>
          </article>
        `;
      })
      .join("");
  }

  function renderPromotionCards(selector, items) {
    const container = document.querySelector(selector);

    if (!container) {
      return;
    }

    container.innerHTML = items
      .map(function (item) {
        return `
          <article class="promo-card">
            <strong>${escapeHtml(item.series)}</strong>
            <h3>${escapeHtml(item.name)}</h3>
            <p>${escapeHtml(item.summary)}</p>
            <p>${escapeHtml(item.terms)}</p>
          </article>
        `;
      })
      .join("");
  }

  function escapeHtml(value) {
    return String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function escapeAttribute(value) {
    return escapeHtml(value).replaceAll("`", "&#096;");
  }

  loadSiteContent();
})();
