(function () {
  function escapeHtml(value) {
    if (value === null || value === undefined) return "";


    return String(value)

      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }


  function createProjectItem(project) {
    const company = escapeHtml(project.company);
    const title = escapeHtml(project.title);
    const logo = escapeHtml(project.logo);
    const image = escapeHtml(project.image);
    const description = escapeHtml(project.description);


    const item = document.createElement("div");
    item.className = "project-item";


    item.innerHTML = `
      <div class="project-logo-wrap">
         <div class="project-logo-box">
           <img class="project-logo" src="${logo}" alt="${company} ·Î°í">
          </div>
      </div>


      <div class="project-image-wrap">
        <img class="project-image" src="${image}" alt="${title} À̹ÌÁö">
      </div>


      <div class="project-title-wrap">
        ${company ? `<p class="project-company">${company}</p>` : ""}
        <h3 class="project-title">${title}</h3>
        ${description ? `<p class="project-desc">${description}</p>` : ""}
      </div>
    `;


    return item;
  }


  function renderProjects() {
    const projectList = document.getElementById("projectList");
    const projectEmpty = document.getElementById("projectEmpty");


    if (!projectList) return;


    if (!Array.isArray(PROJECTS) || PROJECTS.length === 0) {
      projectList.innerHTML = "";


      if (projectEmpty) {
        projectEmpty.style.display = "block";
      }


      return;
    }


    if (projectEmpty) {
      projectEmpty.style.display = "none";
    }


    projectList.innerHTML = "";


    PROJECTS.forEach(function (project) {
      const item = createProjectItem(project);
      projectList.appendChild(item);
    });
  }


  document.addEventListener("DOMContentLoaded", renderProjects);
})();