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
    const sourceUrlEl = document.querySelector("[data-source-url]");
    sourceUrlEl.href = content.sourceUrl;
    sourceUrlEl.textContent = content.sourceUrl || "No source available";
    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.className = "section";
      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>
        <div class="principles-list" data-principles></div>
      </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>
    `;

    // Render principles with SVG icons
    const principlesList = document.querySelector("[data-principles]");
    if (content.sidePanel.principles.items) {
      const items = content.sidePanel.principles.items;
      const allowedItems = items.filter(item => item.type === 'allow');
      const avoidItems = items.filter(item => item.type === 'avoid');

      principlesList.innerHTML = `
        <div class="permissions-group">
          ${allowedItems.map(item => `
            <div class="permission-item">
              <img src="assets/correct.svg" width="16" height="16" alt="Allowed" />
              <span>${item.text}</span>
            </div>
          `).join('')}
        </div>
        <div class="permissions-group avoid">
          ${avoidItems.map(item => `
            <div class="permission-item">
              <img src="assets/avoid.svg" width="16" height="16" alt="Prohibited" />
              <span>${item.text}</span>
            </div>
          `).join('')}
        </div>
      `;
    }

  } catch (error) {
    console.error("Error loading content:", error);
    document.body.innerHTML = "<h1>Error loading license content</h1>";
  }
}

loadContent();