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

  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();
      displayFloatWrapper(responseData)
      displayFloatWrapperMobile(responseData)
      displayCourseDetails(responseData)
      displayAboutCourse(responseData)
      displayTeachers(responseData)
    } catch (error) {
      console.error('Erro ao buscar cursos:', error);
    }
  }

  function displayFloatWrapper(course) {
    const container = document.querySelector('.float-wrapper');
    
    const lastInstallment = course.installments[course.installments.length - 1];

     const pageHTML = `
        <div class="floating shadow">
            <img src="${course.image}" alt="" class="image-course-detail">
            <div class="floating__description ">
                <p class="fw-bold fs-6 text-decoration-line-through m-0">de R$ ${course.price}</p>
                <p class="fs-5 fw-bold font-yellow mb-1">por R$ ${course.price_with_discount}</p>
                <p class="fs-6 fw-bold font-purple discount">ou em até ${lastInstallment.number_of_installments}x de R$ ${lastInstallment.value.toFixed(2).replace('.', ',')}</p>
                <a href=${course.enrol_page} class="btn btn_02 btn-lg w-100 buy_button">Quero comprar agora!</a>
            </div>
        </div>
      `;
      
      container.innerHTML = pageHTML;
    }
    
    
    
    function displayCourseDetails(course) {
    const container = document.querySelector('#course-details');

     const pageHTML = `
        <div class="container  px-4 py-5">

            <div class="flex-lg-row align-items-center g-5 py-5">
    
                <div class="row col-lg-8 font-white mb-2">
                    <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3 font-yellow" id="course_name">${course.name}</h1>
                </div>
                <div class="row col-lg-8">
                    <div class="col-sm-6 col-lg-3 d-flex justify-content-center align-items-center">
                        <div class="d-flex justify-content-center align-items-center flex-column text-center">
                            <img src="https://cdn.ead.guru/static/page_editor/templates/images/contact/time_01.svg"
                                 class="img-fluid svg-icon rounded-3"
                                 alt="Example image" loading="lazy">
                            <p class="fw-bold font-white">${Math.floor(course.workload / 60)} horas de conteúdo</p>
    
                        </div>
                    </div>
    
                    <div class="col-sm-6 col-lg-3 d-flex justify-content-center align-items-center ">
                        <div class="d-flex justify-content-center align-items-center flex-column text-center">
                            <img src="https://cdn.ead.guru/26190/media/public/websites/inicial/paper-checklist-with-pen-svgrepo-com_1.svg"
                                 class="img-fluid svg-icon rounded-3"
                                 alt="Example image" loading="lazy">
                            <p class="fw-bold font-white">Exercícios práticos</p>
    
                        </div>
                    </div>
    
                    <div class="col-sm-6 col-lg-3 d-flex justify-content-center align-items-center">
                        <div class="d-flex justify-content-center align-items-center flex-column text-center">
                            <img src="https://cdn.ead.guru/26190/media/public/websites/inicial/questions-and-answers-svgrepo-com_1.svg"
                                 class="img-fluid svg-icon rounded-3"
                                 alt="Example image" loading="lazy">
                            <p class="fw-bold font-white">Suporte a dúvidas</p>
    
                        </div>
                    </div>
    
                    <div class="col-sm-6 col-lg-3 d-flex justify-content-center align-items-center">
                        <div class=" d-flex justify-content-center align-items-center flex-column text-center">
                            <img src="https://cdn.ead.guru/static/page_editor/templates/images/contact/computer_01.svg"
                                 class="img-fluid svg-icon rounded-3"
                                 alt="Example image" loading="lazy">
                            <p class="fw-bold font-white">Todos os dispositivos!</p>
    
                        </div>
                    </div>
                </div>
            </div>
    
        </div>
      `;
      
      container.innerHTML = pageHTML;
    }
    
    function displayFloatWrapperMobile(course) {
    const container = document.querySelector('.video-mobile');
    
    const lastInstallment = course.installments[course.installments.length - 1];

     const pageHTML = `
        <div class="floating shadow">
            <img src="${course.image}" alt="" class="image">
            <div class="floating__description ">
                <p class="fw-bold fs-6 text-decoration-line-through m-0">de R$ ${course.price}</p>
                <p class="fs-5 fw-bold font-yellow mb-1">por R$ ${course.price_with_discount}</p>
                <p class="fs-6 fw-bold font-purple discount">ou em até ${lastInstallment.number_of_installments}x de R$ ${lastInstallment.value.toFixed(2).replace('.', ',')}</p>
                <a href=${course.enrol_page} class="btn btn_02 btn-lg w-100 buy_button">Quero comprar agora!</a>
            </div>
        </div>
      `;
      
      container.innerHTML = pageHTML;
    }
    
    function displayAboutCourse(course) {
        
        const container = document.querySelector('.about-course');
        
        const pageHTML = `
            <p class="lead font-white">${course.description}</p>
        `;
    
        container.innerHTML = pageHTML;
    }
    
    function displayTeachers(course) {
        
    const container = document.querySelector('.teachers');
    
    let pageHTML = '';

    course.teachers.forEach(teacher => {
        pageHTML += `
            <div class="teacher-profile">
                <img src="${teacher.profile.avatar}" alt="Foto do professor" class="profile-image">
                <div class="profile-info">
                    <h2>${teacher.full_name}</h2>
                    <p>${teacher.profile.bio}</p>
                </div>
            </div>
        `;
    });

    container.innerHTML = pageHTML;
    }
    
    function displayBuyButton(course) {
        
    const container = document.querySelector('.buy-button');
    
    const pageHTML = `
        <div class="row flex-lg-row-reverse align-items-center text-center justify-content-center">
            <div class="col-10 col-sm-8 col-lg-5">
                <a href=${course.enrol_page} class="btn btn_02 btn-lg w-100 buy_button">Quero comprar agora!</a>
            </div>
        </div>
      `;

    container.innerHTML = pageHTML;
    }
    
  fetchCourseDetails();
});