script.js

let siteData = null;
let activeTabId = null;
let searchTerm = "";

const tabNav = document.getElementById("tab-nav");
const pageTitle = document.getElementById("page-title");
const siteSubtitle = document.getElementById("site-subtitle");
const statusPill = document.getElementById("status-pill");
const contentGrid = document.getElementById("content-grid");
const heroCard = document.getElementById("hero-card");
const heroLabel = document.getElementById("hero-label");
const heroTitle = document.getElementById("hero-title");
const heroDescription = document.getElementById("hero-description");
const heroImageWrap = document.getElementById("hero-image-wrap");
const heroImage = document.getElementById("hero-image");
const emptyState = document.getElementById("empty-state");
const searchInput = document.getElementById("search-input");

async function init() {
  try {
    const response = await fetch("./config.json");
    siteData = await response.json();
    applySiteMeta();
    buildTabs();
    const firstTab = siteData.tabs?.[0];
    if (firstTab) setActiveTab(firstTab.id);
    searchInput.addEventListener("input", onSearch);
  } catch (error) {
    pageTitle.textContent = "Error loading config";
    contentGrid.innerHTML = `<div class="content-card"><h3 class="card-title">Config could not be loaded</h3><p class="card-body">Check that config.json exists and is valid JSON.</p></div>`;
    console.error(error);
  }
}

function applySiteMeta() {
  document.title = siteData.site?.title || "MDT";
  siteSubtitle.textContent = siteData.site?.subtitle || "Knowledge Base";
  statusPill.textContent = siteData.site?.status || "Active";
}

function buildTabs() {
  tabNav.innerHTML = "";
  (siteData.tabs || []).forEach((tab) => {
    const button = document.createElement("button");
    button.className = "tab-button";
    button.dataset.tabId = tab.id;
    button.innerHTML = `
      <span class="tab-title">${escapeHtml(tab.label)}</span>
      <span class="tab-subtitle">${escapeHtml(tab.description || "")}</span>
    `;
    button.addEventListener("click", () => setActiveTab(tab.id));
    tabNav.appendChild(button);
  });
}

function setActiveTab(tabId) {
  activeTabId = tabId;
  document.querySelectorAll(".tab-button").forEach((btn) => {
    btn.classList.toggle("active", btn.dataset.tabId === tabId);
  });
  renderTab();
}

function onSearch(event) {
  searchTerm = event.target.value.trim().toLowerCase();
  renderTab();
}

function renderTab() {
  const tab = (siteData.tabs || []).find((item) => item.id === activeTabId);
  if (!tab) return;

  pageTitle.textContent = tab.label;

  renderHero(tab.hero);

  const filteredSections = (tab.sections || []).filter(matchesSearch);
  contentGrid.innerHTML = "";

  if (!filteredSections.length) {
    emptyState.classList.remove("hidden");
    return;
  }

  emptyState.classList.add("hidden");

  filteredSections.forEach((section) => {
    const card = document.createElement("article");
    card.className = "content-card";

    let listHtml = "";
    if (Array.isArray(section.list) && section.list.length) {
      listHtml = `<ul class="card-list">${section.list.map((item) => `<li>${escapeHtml(item)}</li>`).join("")}</ul>`;
    }

    let imageHtml = "";
    if (section.image) {
      imageHtml = `<img class="card-image" src="${escapeAttribute(section.image)}" alt="${escapeAttribute(section.title)}" />`;
    }

    card.innerHTML = `
      <span class="card-kicker">${escapeHtml(section.kicker || tab.label)}</span>
      <h3 class="card-title">${escapeHtml(section.title)}</h3>
      <p class="card-body">${escapeHtml(section.text || "")}</p>
      ${listHtml}
      ${imageHtml}
    `;
    contentGrid.appendChild(card);
  });
}

function renderHero(hero) {
  if (!hero || (!hero.title && !hero.description)) {
    heroCard.classList.add("hidden");
    return;
  }

  heroCard.classList.remove("hidden");
  heroLabel.textContent = hero.label || "Overview";
  heroTitle.textContent = hero.title || "";
  heroDescription.textContent = hero.description || "";

  if (hero.image) {
    heroImageWrap.classList.remove("hidden");
    heroImage.src = hero.image;
    heroImage.alt = hero.title || "Hero image";
  } else {
    heroImageWrap.classList.add("hidden");
  }
}

function matchesSearch(section) {
  if (!searchTerm) return true;
  const haystack = [
    section.kicker,
    section.title,
    section.text,
    ...(section.list || [])
  ].join(" ").toLowerCase();
  return haystack.includes(searchTerm);
}

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

function escapeAttribute(value) {
  return String(value ?? "").replaceAll('"', "&quot;");
}

init();