document.addEventListener("DOMContentLoaded", function() {
                                
  const endpoint = 'https://academiadaaprovacao.mindz.com.br/api/public/v1/products/courses/curso-preparatorio-para-o-concurso-de-it-jzljx2/';

  async function fetchCourseDetails() {
    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();
      displayCourseHomepage(responseData)
      console.log(responseData)
    } catch (error) {
      console.error('Erro ao buscar cursos:', error);
    }
  }

  function displayCourseHomepage(course) {
                    
    const container = document.querySelector('.course-homepage');
        
    const pageHTML = `
            <h2 class="display-4 mb-4 text-body-emphasis font-white">Aproveite esta Super Oferta!</h2>
            <div class="col-lg-4 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>
        
      `;
      
      container.innerHTML = pageHTML;
    }
  fetchCourseDetails();
});