async function load() {
  const grid = $("#explore-grid");
  try {
    const ideas = await api.req("GET", "/api/explore");
    if (!ideas.length) {
      grid.innerHTML =
        '<div class="empty"><span class="big">🌱</span>No public ideas yet. Be the first to share one!</div>';
      return;
    }
    grid.innerHTML = ideas
      .map(
        (idea) => `
        <a class="feature-card" href="/share?idea=${idea.id}" style="cursor:pointer">
          <h3>${escapeHtml(idea.title)}</h3>
          <p>${
            idea.description
              ? escapeHtml(idea.description)
              : "<em>No description</em>"
          }</p>
          <div class="meta" style="margin-top:14px;font-size:0.8rem;color:var(--muted);display:flex;gap:10px">
            <span class="pill">${idea.note_count} note${
          idea.note_count === 1 ? "" : "s"
        }</span>
            <span>by ${escapeHtml(idea.author_name || "someone")}</span>
            <span>· ${relativeTime(idea.updated_at)}</span>
          </div>
        </a>`
      )
      .join("");
  } catch (e) {
    grid.innerHTML = `<div class="empty">Could not load ideas: ${escapeHtml(
      e.message
    )}</div>`;
  }
}
load();