<!DOCTYPE html>
<html lang="pt">
  <%- include('partials/head', {title}) %>

  <body style="font-family: 'Poppins', sans-serif">
    <!-- Navbar -->
    <%- include('partials/header', {activePage}) %>

    <!-- Header (Hero Section) -->
    <header class="hero-section text-center" style="padding-top: 110px; padding-bottom: 110px">
      <div class="container h-100 w-100 d-flex flex-column align-items-center justify-content-center position-relative"
        style="background: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(0, 0, 0, 0.9)),
                url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
              background-size: cover;
              background-position: center;
              color: white;
              padding: 100px 20px;
              border-radius: 30px;">
        <div class="container">
          <div class="row justify-content-center align-content-center">
            <div class="col-md-8">
              <h1 class="fw-bolder animate__animated animate__fadeInDown"
                style="font-size: 3.5rem; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5)">
                Domine a Gestão de Projetos para
                <span class="text-primary" style="color: #00bfff">Engenharia</span>
                e Tecnologia
              </h1>
              <p class="fs-5 mt-3 animate__animated animate__fadeInUp"
                style="text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5)">
                Inscreva-se agora e garanta um desconto especial!
              </p>
              
              <!-- Botão para acionar o modal -->
              <button type="button" class="btn btn-primary rounded-pill py-3 px-4 fw-bold" data-bs-toggle="modal" data-bs-target="#modalInscricao" style="
                  background-color: #00bfff;
                  border: none;
                  border-radius: 8px;
                  font-size: 1.1rem;
                  transition: all 0.3s ease;">
                  <i class="bi bi-pencil-square me-2"></i> Quero me inscrever
              </button>

              <span class="text-center mt-5 animate__animated animate__bounce animate__infinite"
                id="hero-arrow"
                title="Faça Scroll para baixo !"
                style="font-size: 2rem; cursor: pointer; color: white; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5)">
                <i class="bi bi-caret-circle-down"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Resto do conteúdo da sua landing page -->
    <!-- Section de Opções -->
    <section class="opcoes text-center py-5" style="background-color: #0a192f">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- Section de Sobre -->
    <section class="why-choose-section py-5" style="background-color: #030b16">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- Section de Estatísticas -->
    <section class="stats-section py-5 bg-white">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- Section de Público-Alvo e Investimento -->
    <section class="team-section text-center py-5" style="background-color: #0a192f">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- Section do Professor -->
    <section class="about-teacher-section py-5" style="background-color: #f8f9fa">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- FAQ Section -->
    <section class="faq-section py-5" id="faq-section" style="background-color: #030b16">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- Patrocinadores -->
    <section class="sponsors-section py-5">
      <!-- ... conteúdo existente ... -->
    </section>

    <!-- Footer -->
    <%- include('partials/footer') %>

    <!-- Modal de Inscrição -->
    <%- include('partials/modal-inscricao', {turmas, dadosBancarios}) %>

    <!-- Scripts -->
    <%- include('partials/scripts') %>
  </body>
</html>