<style>
    /* Titulo dos Campos */
    .formulario .campo label {
    margin-bottom: 0px;
    }
    .formulario label2 {
    font-family: "Campuni", Sans-serif;
    font-size: 16px;
    margin-top: -6px;
    color: #485585;
    }
    .formulario .campo obs {
    font-size: 12px;
    }
    /* Estilo dos Campos */
    .formulario .campo input,
    .formulario .campo select {
    font-size: 16px;
    font-weight: 400;
    color: #485585;
    background-color: #fff;
    border: 1px solid  #00000020;
    border-radius: 10px;
    padding: 8px 16px;
    width: 100%;
    height: 40px;
    margin-bottom: 16px;
    }
    .formulario .campo input:hover,
    .formulario .campo select:hover {
    background-color: #f4f7fe;
    }
    .formulario .campo input:active,
    .formulario .campo select:active {
    background: #e9edf7;
    }
    .formulario .campo input:valid,
    .formulario .campo select:valid {
    background: #f4f7fe;
    color: #000;
    font-weight: 600;
    }
    /* Checkbox e Seletor Radius */
    .formulario input[type="checkbox"],
    .formulario input[type="radio"] {
    width: 16px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #00000020;
    margin-right: 16px;
    border-radius: 8px;
    }
    /* Seta personalizada dos Seletores */
    .formulario .campo select {
    appearance: none;
    background-image: url("https://squad-sebrae.github.io/scripts-repository/salesforce/AF_icone_baixo.svg");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-size: 24px;
    }
    /* Botão */
    .formulario input[type="submit"] {
    font-family: "Campuni", Sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #0041d9;
    border: 1px solid #0000001a;
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    }
    .formulario input[type="submit"]:hover {
    background-color: #0024a9;
    }
    /* Link Privacidade */
    .formulario a {
    text-decoration: underline !important;
    font-weight: 600;
    color: #3b89ff;
    }
    .formulario a:active,
    .formulario a:hover {
    color: #10bcf2;
    }
    
    .form-step {
      display: none;
    }

    .campo, .checkbox {
      margin-bottom: 8px;
    }
    
      button {
        padding: 10px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        color: #fff;
      }
    
      button.back-btn {
        background-color: black;
      }
    
      button.next-btn {
      }

    #step1 {
      display: block;
    }

    #step-buttons {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
 </style>



<div class="form-container">
  <div>
    <form id="SubmitForm" class="formulario" action="https://cloud.divulga.sebraepr.com.br/processalp_portal" method="post" name="SubmitForm">
      <!-- Etapa 1 -->
      <div class="form-step" id="step1">
          <h3>Dados pessoais</h3>
        <!-- ... Campos de Configuração Salesforce ... -->
          <input name="_URLRedireciona" type="hidden"
             value="https://www.sebraepr.com.br/obrigado/">
          <input name="localidade" type="hidden" value="BR">
          <input name="apiname" type="hidden" value="API_Portal">
          <input name="origem" type="hidden" value="lp_GovernancaPortal">

        <!-- ... Campos da Etapa 1 ... -->
          <div class="campo">
             <label for="nome">Nome Completo<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="nome" name="nome" type="text" required >
          </div>
          <div class="campo">
             <label for="email">E-mail<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="email" name="email" type="email" placeholder="Digite seu e-mail" required >
          </div>
          <div class="campo">
             <label for="cpf">CPF<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="cpf" name="cpf" type="text" placeholder="000.000.000-00" required >
          </div>
          <div class="campo">
             <label for="celular">Telefone<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="celular" name="celular" type="text" placeholder="(41) 0 0000 0000" required >
          </div>
        <div class="campo">
            <label for="pergunta5">Data de Nascimento<sup>*</sup></label>
            <obs>(Obrigatório)</obs>
            <input id="pergunta5" name="pergunta5" type="date" required placeholder="DD/MM/AAAA">
        </div>


        <div id="step-buttons">
    <button  id="enviar" class="next-btn"  onclick="nextStep(2)">Avançar</button>
        </div>
      </div>

      <!-- Etapa 2 -->
      <div class="form-step" id="step2">
          <h3>Dados empresariais</h3>
        <!-- ... Campos da Etapa 2 ... -->
          <div class="campo">
             <label for="cnpj">CNPJ<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="cnpj" name="cnpj" type="text" placeholder="00.000.000/0001-00" required>
          </div>
          <div class="campo">
             <label for="porte">Qual o porte da sua empresa?<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <select name="porte" id="porte" required>
                <option value="" disabled selected hidden>Selecione o porte</option>
                <option value="CPF">Pessoa Física</option>
                <option value="MEI">MEI - Micro empreendedor individual</option>
                <option value="Micro a pequena">Micro a pequena (faturamento até R$ 360.000,00)</option>
                <option value="Pequena a média">Pequena a média (faturamento até R$ 4,8 milhões)</option>
                <option value="Média a grande">Média a grande (faturamento acima R$ 12 milhões)</option>
             </select>
          </div>
          <div class="campo">
             <label for="modalidade">Selecione a modalidade de sua participação<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <select name="modalidade" id="modalidade" required>
                <option value="" disabled selected hidden>Selecione uma modalidade</option>
                <option value="Online">Online – Link da transmissão no seu e-mail</option>
                <option value="Presencial">Presencial - Endereço Loren Ipsun 123, Cidade - PR</option>
                <option value="Presencial">Presencial - Endereço Loren Ipsun 123, Cidade - PR</option>
                <option value="Presencial">Presencial - Endereço Loren Ipsun 123, Cidade - PR</option>
             </select>
          </div>

        <div id="step-buttons">
    <button type="button" class="back-btn" onclick="prevStep(1)">Voltar</button>
    <button type="button" class="next-btn" onclick="nextStep(3)">Avançar</button>
        </div>
      </div>

      <!-- Etapa 3 -->
      <div class="form-step" id="step3">
        <h3>Perguntas complementares</h3>
        <!-- ... Campos da Etapa 3 ... -->
          <div class="campo">
             <label for="pergunta1">Pergunta 01, texto livre para colocar aqui e perguntar ao usuário<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="pergunta1" name="pergunta1" type="text" required >
          </div>
          <div class="campo">
             <label for="pergunta2">Pergunta 02, texto livre para colocar aqui e perguntar ao usuário<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="pergunta2" name="pergunta2" type="text" required >
          </div>
          <div class="campo">
             <label for="pergunta3">Pergunta 03, texto livre para colocar aqui e perguntar ao usuário<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="pergunta3" name="pergunta3" type="text" required>
          </div>
          <div class="campo">
             <label for="pergunta4">Pergunta 04, texto livre para colocar aqui e perguntar ao usuário<sup>*</sup></label>
             <obs>(Obrigatório)</obs>
             <input id="pergunta4" name="pergunta4" type="text" required>
          </div>

        <div id="step-buttons">
    <button type="button" class="back-btn" onclick="prevStep(2)">Voltar</button>
    <button type="button" class="next-btn" onclick="nextStep(4)">Avançar</button>
        </div>
      </div>

      <!-- Etapa 4 -->
      <div class="form-step" id="step4">
        <h3>Aceites de privacidade</h3>
        <!-- ... Campos da Etapa 4 ... -->
          <!-- Aceites LGDP - UIC -->
          <div class="campo">
             <div class="checkbox" style="width: 90%; display: flex; margin-top: 8px; margin-bottom: 8px">
                <input class="checkbox" type="checkbox" id="aceitePrivacidade" name="aceitePrivacidade" value="true" required aria-label="Aceitar a Política de Privacidade do Sebrae PR" />
                <label for="aceitePrivacidade">
                   Declaro que li e estou ciente que os meus dados serão tratados conforme as diretrizes da <a href="https://sebraepr.com.br/privacidade" target="_blank">Política de Privacidade</a> do Sebrae.<sup>*</sup>
                   <obs> (Obrigatório)</obs>
                </label>
             </div>
             <div class="checkbox" style="width: 90%; display: flex; margin-top: 8px; margin-bottom: 8px">
                <input class="checkbox" type="checkbox" id="aceiteTermos" name="aceiteTermos" value="true" required aria-label="Aceitar o Termo de Uso do Sebrae PR" />
                <label for="aceiteTermos">
                   Declaro que estou de acordo com o <a href="https://www.sebraepr.com.br/termos-de-uso/" target="_blank">Termo de Uso</a>.<sup>*</sup>
                   <obs> (Obrigatório)</obs>
                </label>
             </div>
             <div class="checkbox" style="width: 90%; display: flex; margin-top: 8px; margin-bottom: 8px">
                <input class="checkbox" type="checkbox" id="aceiteMarketing" name="aceiteMarketing" value="true" aria-label="Aceitar receber conteúdos e promoções do Sebrae PR" />
                <label for="aceiteMarketing">Aceito receber conteúdos e promoções do Sebrae PR (opcional).</label>
             </div>
          </div>


        <div id="step-buttons">
    <button type="button" class="back-btn" onclick="prevStep(3)">Voltar</button>
    <!-- <input type="submit" id="enviar" value="Inscreva-se Agora" form="SubmitForm" /> -->
    <button type="submit" id="enviar" form="SubmitForm" value="Submit">Inscreva-se Agora</button>
        </div>
      </div>

    </form>
  </div>
</div>


<!-- Formulário em Passos -->
<script>
  let currentStep = 1;

  function nextStep(next) {
    // Verificar se todos os campos obrigatórios foram preenchidos
    if (validarCamposObrigatorios()) {
      // Salvar os dados antes de avançar para a próxima etapa
      salvarDados();

      document.getElementById(`step${currentStep}`).style.display = "none";
      document.getElementById(`step${next}`).style.display = "block";
      currentStep = next;

      // Carregar os dados ao avançar para a próxima etapa
      carregarDados();
    } else {
      alert("Por favor, preencha todos os campos obrigatórios antes de avançar.");
    }
  }

  function prevStep(prev) {
    // Salvar os dados antes de voltar para a etapa anterior
    salvarDados();
    
    document.getElementById(`step${currentStep}`).style.display = "none";
    document.getElementById(`step${prev}`).style.display = "block";
    currentStep = prev;

    // Carregar os dados ao voltar para a etapa anterior
    carregarDados();
  }

  function validarCamposObrigatorios() {
    const camposObrigatorios = document.querySelectorAll(`#step${currentStep} [required]`);

    for (const campo of camposObrigatorios) {
      if (!campo.value.trim()) {
        return false;
      }
    }

    return true;
  }
function salvarDados() {
  const formData = JSON.parse(localStorage.getItem('formData')) || {};

  // Obtém todos os campos da etapa atual do formulário
  const campos = document.querySelectorAll(`#step${currentStep} input, #step${currentStep} select`);

  // Itera sobre os campos e salva os dados no objeto formData, excluindo os campos de perguntas
  campos.forEach((campo) => {
    // Verifica se o campo não é uma pergunta
    if (!campo.id.startsWith('pergunta')) {
      if (campo.type !== 'checkbox') {
        formData[campo.id] = campo.value;
      } else {
        formData[campo.id] = campo.checked;
      }
    }
  });

  // Salva os dados no localStorage
  localStorage.setItem('formData', JSON.stringify(formData));
}

function carregarDados() {
  const formData = JSON.parse(localStorage.getItem('formData'));

  // Verifica se há dados salvos
  if (formData) {
    // Preenche os campos da etapa atual do formulário com os dados salvos
    const campos = document.querySelectorAll(`#step${currentStep} input, #step${currentStep} select`);
    campos.forEach((campo) => {
      if (formData.hasOwnProperty(campo.id)) {
        campo.value = formData[campo.id];
      }
    });

    // Tratamento para Perguntas Complementares
    for (let i = 1; i <= 4; i++) {
      const perguntaCampo = document.getElementById(`pergunta${i}`);
      if (perguntaCampo && formData.hasOwnProperty(`pergunta${i}`)) {
        perguntaCampo.value = "";
      }
    }
  }
}

// Carrega os dados ao carregar a página
window.addEventListener('load', carregarDados);

</script>


<!-- Mail Validatator -->
 <script src="https://optin.safetymails.com/main/safetyscript/fa3b23b4179a309d106124afb9ad909cb45b1a7b/safetyoptin.js"></script>

 <!-- SQUAD Portal/App Validações -->
<script
src="https://squad-sebrae.github.io/scripts-repository/salesforce/valida-salesforce.min.js"
id="salesforce-validations"
EXPIRATION_DATE_TIME="01/01/2099 00:00"
FORM_ID="SubmitForm"
FORM_SUBMIT_ID="enviar"
EXPIRATION_MESSAGE="Inscrições encerradas!"
EXPIRATION_FONT_COLOR="#000"
EXPIRATION_FONT_SIZE="24px"
EXPIRATION_BACKGROUND_COLOR="rgba(246, 0,64, 0.5)"
EMAIL_ID="email"
CPF_ID="cpf"
CNPJ_ID="cnpj"
TELEFONE_ID="celular"
CPF_MESSAGE="Atenção: CPF inválido."
CPNJ_MESSAGE="Atenção: CNPJ inválido."
TELEFONE_MESSAGE="Atenção: Telefone inválido."
SECAO_CPF=""
BCS_INTEGRATION="false">
/**
* id: Manter sempre o valor padrão: salesforce-validations
* EXPIRATION_DATE_TIME: A data que será indisponibilizado o formulário de inscrição
* FORM_ID: ID do FORM
* FORM_SUBMIT_ID: Coloque aqui o ID do botão
* CIDADES_ID: ID do input de cidades
* REGIONAL_ID: ID do input de regional
* EXPIRATION_MESSAGE: Mensagem que será exibida quando o prazo da LP expirar
* EXPIRATION_FONT_COLOR: Cor da fonte da mensagem de expiração
* EXPIRATION_FONT_SIZE: Tamanho da fonte da mensagem de expiração
* EXPIRATION_BACKGROUND_COLOR: Cor de fundo da mensagem de expiração
* EMAIL_ID: ID do input de email
* CPF_ID: ID do input de CPF
* CNPJ_ID: ID do input de CNPJ
* TELEFONE_ID: ID do input de telefone
* CPF_MESSAGE: Mensagem de erro de CPF
* CPNJ_MESSAGE: Mensagem de erro de CNPJ
* TELEFONE_MESSAGE: Mensagem de erro no telefone
* CONFIRMATION_MESSAGE: Mensagem de confirmação. Remova caso não queira que exiba o "alert" de obrigado no final do formulário.
* SECAO_CPF: ID DIV que envolve o CPF. Oculta o CPF em caso de estrangeiro.
* ESTRANGEIRO_ID: ID do campo checkbox que fala se o agente é estrangeiro ou não.
* BCS_INTEGRATION: Se true envia os dados para BCS
*
* OBS: Caso algum campo não seja necessário remover a referência do script e o HTML
*/
</script>