document.addEventListener("DOMContentLoaded", function() {
                                
  const endpoint = 'https://academiadaaprovacao.mindz.com.br/api/public/v1/products/courses/?limit=100';

  async function fetchCourses() {
    try {
      const response = await fetch(endpoint, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      });

      if (!response.ok) {
        throw new Error(`Erro: ${response.statusText}`);
      }

      const responseData = await response.json();
      displayListCourses(responseData.results.slice(0, 3));
  
    } catch (error) {
      console.error('Erro ao buscar cursos:', error);
    }
  }

  function displayListCourses(courses) {
    const container = document.querySelector('.list-courses');

    courses.forEach(course => {
      const cardHTML = `
        <div class="col-lg-4 d-inline-flex align-items-center justify-content-center ">
            <div class="card p-3 border_02 shadow background_white">
                <img src=${course.image}
                     class="card-img-top " alt="Capa do Curso">
                <div class="card-body col">
                    <h5 class="card-title-course mb-3 font-purple">${course.name}</h5>
                    <h6 class="card-subtitle mb-2 font-purple">${course.teachers_name}</h6>
                    <!-- <p class="text-decoration-line-through fs-6 mb-1 mt-1 font-purple"><b>de R$160,99</b></p> -->
                    <p class="fs-5 font-yellow"><b>por R$${course.price}</b></p>
                    <div class="text-center">
                        <a href="${course.checkout_page}" class="btn btn-primary btn_02  w-100 ">Quero comprar agora!</a>
                    </div>
                </div>
            </div>
        </div>
      `;

      container.innerHTML += cardHTML;
    });
  }

  fetchCourses();
});