main.js

async function loadContent() {
  try {
    const response = await fetch("content.json");
    const content = await response.json();

    // Header
    document.querySelector("[data-title]").textContent = content.title;
    document.querySelector("[data-version]").textContent = content.version;
    document.querySelector("[data-subtitle]").textContent = content.subtitle;
    document.querySelector("[data-meta]").textContent = content.meta;
    document.querySelector("[data-badge]").textContent = content.badge;
    document.title = content.title;

    // Source
    document.querySelector("[data-source-url]").href = content.sourceUrl;
    document.querySelector("[data-source-url]").textContent = content.sourceUrl;
    document.querySelector("[data-source-text]").textContent = content.sourceText;

    // Sections
    const sectionsContainer = document.querySelector("[data-sections]");
    content.sections.forEach((section) => {
      const sectionEl = document.createElement("div");
      sectionEl.innerHTML = `
        <div class="section-label">${content.sectionLabel}</div>
        <h2>${section.title}</h2>
        ${Array.isArray(section.content)
          ? `<ul>${section.content
            .map((item) => `<li>${item}</li>`)
            .join("")}</ul>`
          : `<p>${section.content}</p>`
        }
      `;
      sectionsContainer.appendChild(sectionEl);
    });

    // Side panel
    const sidePanel = document.querySelector("[data-sidepanel]");
    sidePanel.innerHTML = `
      <div class="side-card">
        <div class="pill">
          <span class="pill-dot"></span>
          ${content.sidePanel.pill}
        </div>
        <h3 class="side-title">${content.sidePanel.principles.title}</h3>
        <p class="side-text">${content.sidePanel.principles.text}</p>
      </div>
      <div class="side-card">
        <h3 class="side-title">${content.sidePanel.snapshot.title}</h3>
        <div class="meta-grid">
          ${content.sidePanel.snapshot.items
        .map(
          ([key, value]) => `
              <div class="meta-item">
                <span>${key}</span>
                <span>${value}</span>
              </div>
            `
        )
        .join("")}
        </div>
      </div>
      <div class="side-card">
        <h3 class="side-title">${content.sidePanel.hint.title}</h3>
        <p class="side-text">${content.sidePanel.hint.text}</p>
      </div>
    `;
  } catch (error) {
    console.error("Error loading content:", error);
  }
}

loadContent();