// conference.js
async function renderCurrentConference() {
  const confData = await loadJSON("data/conferences/2025.json");
  const container = document.querySelector("[data-conference-current]");
  if (!container || !confData) return;

  container.innerHTML = `
    <article class="section-card">
      <div class="img-ph" style="margin-bottom:1.5rem; min-height:180px;">
        <div>
          <strong>Host City / Venue Banner Placeholder</strong><br/>
          Suggested: skyline, campus, field site.
        </div>
      </div>

      <h1>${confData.title}</h1>
      <p><strong>${confData.datesLocation}</strong></p>

      <h2>Conference Highlights</h2>
      <ul class="conf-highlights">
        ${confData.highlights.map(h => `<li>${h}</li>`).join("")}
      </ul>

      <h2>Journal / Submission</h2>
      <p class="conf-journal">${confData.journalNote}</p>

      <h2>Sponsorship</h2>
      <p class="conf-sponsor">${confData.sponsorBlurb}</p>
    </article>
  `;
}

async function renderConferenceArchive() {
  const archiveEl = document.querySelector("[data-conference-archive]");
  if (!archiveEl) return;

  const past = await loadJSON("data/conferences/past.json");
  if (!past) return;

  let html = `
    <article class="section-card">
      <h1>Past Conferences</h1>
      <ul class="conf-archive-list">
  `;

  past.pastYears.forEach(yearInfo => {
    html += `
      <li style="margin-bottom:.75rem;">
        <strong>${yearInfo.year}</strong> — ${yearInfo.location} (${yearInfo.dates})
        <br/>
        <a href="${yearInfo.href}">Details</a>
      </li>`;
  });

  html += `
      </ul>
    </article>
  `;
  archiveEl.innerHTML = html;
}

document.addEventListener("DOMContentLoaded", () => {
  renderCurrentConference();
  renderConferenceArchive();
});