fetch("/api/guestbook-proxy.php")
  .then(r => r.text())
  .then(html => {
    const doc = new DOMParser().parseFromString(html, "text/html");
    const entries = doc.querySelectorAll(".entry");
    const container = document.getElementById("comments");
    container.innerHTML = "";

    entries.forEach(e => {
      const entry = document.createElement("article");
      entry.className = "guestbook-entry";

      const nameText = e.querySelector("strong")?.textContent || "Anonymous";
      const timeEl = e.querySelector("time");
      const messageText = e.querySelector("p")?.textContent || "";

      const strong = document.createElement("strong");
      strong.textContent = nameText;
      entry.appendChild(strong);

      if (timeEl) {
        const t = document.createElement("time");
        const dt = timeEl.getAttribute("datetime");
        if (dt) t.setAttribute("datetime", dt);
        t.textContent = timeEl.textContent || "";
        entry.appendChild(t);
      }

      const p = document.createElement("p");
      p.textContent = messageText;
      entry.appendChild(p);

      container.appendChild(entry);
    });
  })
  .catch(() => {
    document.getElementById("comments").innerHTML =
      '<p class="guestbook-error">Unable to load comments. Please try refreshing.</p>';
  });