<!-- Modal de Inscrição -->
<div class="modal fade" id="modalInscricao" tabindex="-1" aria-labelledby="modalInscricaoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="border-radius: 15px; background-color: #0a192f">
        <div class="modal-header border-0">
          <h2 class="modal-title fw-bold text-white" id="modalInscricaoLabel">Formulário de Inscrição</h2>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="formInscricao" method="POST" action="/inscrever">
            <div class="mb-3">
              <label for="nome" class="form-label text-white">Nome completo</label>
              <input type="text" class="form-control" id="nome" name="nome" required 
                     style="background-color: #172a45; border: 1px solid #00bfff; color: white;">
            </div>
            
            <div class="mb-3">
              <label for="telefone" class="form-label text-white">Telefone</label>
              <input type="tel" class="form-control" id="telefone" name="telefone" required 
                     style="background-color: #172a45; border: 1px solid #00bfff; color: white;">
            </div>
            
            <div class="mb-3">
              <label for="email" class="form-label text-white">E-mail</label>
              <input type="email" class="form-control" id="email" name="email" required 
                     style="background-color: #172a45; border: 1px solid #00bfff; color: white;">
            </div>
            
            <div class="mb-4">
              <label for="turma" class="form-label text-white">Escolha sua turma</label>
              <select class="form-select" id="turma" name="turma" required 
                      style="background-color: #172a45; border: 1px solid #00bfff; color: white;">
                <option value="" selected disabled>Selecione uma turma</option>
                <% turmas.forEach(turma => { %>
                  <option value="<%= turma.value %>"><%= turma.label %></option>
                <% }); %>
              </select>
            </div>
            
            <div class="d-grid">
              <button type="submit" class="btn btn-primary py-2" 
                      style="background-color: #00bfff; border: none; font-weight: 500;">
                Confirmar Inscrição
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Modal de confirmação -->
  <div class="modal fade" id="modalConfirmacao" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="border-radius: 15px; background-color: #0a192f">
        <div class="modal-header border-0">
          <h2 class="modal-title fw-bold text-white">Inscrição Confirmada!</h2>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-white">
          <p>Sua inscrição foi recebida com sucesso!</p>
          <h5 class="mt-4 mb-3">Instruções para pagamento:</h5>
          <div style="background-color: #172a45; padding: 15px; border-radius: 10px;">
            <p><strong>Banco:</strong> <%= dadosBancarios.banco %></p>
            <p><strong>Conta:</strong> <%= dadosBancarios.conta %></p>
            <p><strong>IBAN:</strong> <%= dadosBancarios.iban %></p>
            <p><strong>WhatsApp:</strong> <%= dadosBancarios.whatsapp %></p>
          </div>
        </div>
        <div class="modal-footer border-0">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" 
                  style="background-color: #00bfff; border: none;">
            Entendido
          </button>
        </div>
      </div>
    </div>
  </div>