<script>

async function loadEvents() {

  const grid = document.getElementById("eventGrid");

  try {

    const response = await fetch(
      "https://theword-events.vercel.app/api/events"
    );

    const events = await response.json();

    grid.innerHTML = events.map(event => `
      <div class="event-card">

        <div class="event-content">

          <div class="event-title">
            ${event.title}
          </div>

          <div class="event-description">
            ${event.description || "Join us for this upcoming event at The WORD Church."}
          </div>

        </div>

      </div>
    `).join("");

  } catch(error) {

    grid.innerHTML = `
      <div style="padding:20px;background:#fff3f3;border:1px solid #ffb3b3;">
        Unable to load events.<br>
        ${error.message}
      </div>
    `;

    console.error(error);
  }

}

loadEvents();

</script>