<div class="form-wrapper">

  <!-- PROGRESS -->
  <div class="progress-wrapper">
    <div class="progress-header">
      <span id="stepText">Etapa 1 de 5</span>
      <button id="backBtn">Voltar</button>
    </div>

    <div class="progress-bar">
      <div class="progress" id="progress"></div>
    </div>
  </div>

  <!-- STEP 1 -->
  <div class="step active" data-step="1">
    <h2>Qual tipo de evento você está planejando?</h2>
    <div class="options">
      <button class="option" data-field="tipo_evento" data-value="confraternizacao">Confraternização</button>
      <button class="option" data-field="tipo_evento" data-value="corporativo">Evento corporativo</button>
      <button class="option" data-field="tipo_evento" data-value="happy_hour">Happy hour de equipe</button>
      <button class="option" data-field="tipo_evento" data-value="outro">Outro</button>
    </div>
  </div>

  <!-- STEP 2 -->
  <div class="step" data-step="2">
    <h2>Quantas pessoas você pretende reunir?</h2>
    <div class="options">
      <button class="option" data-field="pessoas" data-value="ate20">Até 20</button>
      <button class="option" data-field="pessoas" data-value="20a50">20 a 50</button>
      <button class="option" data-field="pessoas" data-value="50a100">50 a 100</button>
      <button class="option" data-field="pessoas" data-value="100+">100+</button>
    </div>
  </div>

  <!-- STEP 3 -->
  <div class="step" data-step="3">
    <h2>Quando você pretende realizar o evento?</h2>
    <div class="options">
      <button class="option" data-field="data_evento" data-value="mes">Ainda este mês</button>
      <button class="option" data-field="data_evento" data-value="3meses">Próximos 3 meses</button>
      <button class="option" data-field="data_evento" data-value="indefinido">Sem data definida</button>
    </div>
  </div>

  <!-- STEP 4 -->
  <div class="step" data-step="4">
    <div class="cta">
      <h2>Um evento bem planejado não é apenas uma reunião.</h2>
      <p>É uma oportunidade de fortalecer conexões, engajar pessoas e gerar resultados.</p>
      <button class="cta-btn" id="goForm">Quero receber uma proposta personalizada</button>
    </div>
  </div>

  <!-- STEP 5 -->
  <div class="step" data-step="5">
    <h2>Receba uma proposta sob medida</h2>

    <form id="finalForm">

      <div class="field">
        <label>Nome</label>
        <input type="text" required>
      </div>

      <div class="field">
        <label>Email</label>
        <input type="email" required>
      </div>

      <div class="field">
        <label>Empresa</label>
        <input type="text">
      </div>

      <div class="field">
        <label>Cargo</label>
        <input type="text">
      </div>

      <div class="field full">
        <label>WhatsApp</label>
        <input type="text" id="whatsapp" placeholder="(00) 00000-0000">
      </div>

      <button type="submit">Receber proposta</button>

      <p class="form-note">
        Retornamos em até 24h com uma proposta personalizada
      </p>

    </form>
  </div>

</div>

body {
  margin: 0;
  font-family: Arial;
  background: #000;
  color: #fff;
}

/* CONTAINER */
.form-wrapper {
  max-width: 800px;
  margin: auto;
  padding: 40px 20px;
}

/* TITULO */
h2 {
  text-align: center;
  margin: 60px 0;
  line-height: 1.3;
}

/* OPTIONS */
.options {
  display: grid;
  gap: 12px;
}

.option {
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #333;
  background: #111;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
}

.option:hover {
  background: #1a1a1a;
}

.option.active {
  border-color: #c9a35b;
  background: rgba(201,163,91,0.15);
}

/* STEPS */
.step {
  display: none;
}

.step.active {
  display: block;
}

/* PROGRESS */
.progress-wrapper {
  margin-bottom: 80px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.progress-bar {
  height: 4px;
  background: #222;
  border-radius: 999px;
  overflow: hidden;
}

.progress {
  height: 100%;
  width: 0%;
  background: #c9a35b;
  transition: 0.3s;
}

#backBtn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 14px;
  cursor: pointer;
}

#backBtn:hover {
  color: #fff;
}

#backBtn.hidden {
  visibility: hidden;
}

/* CTA */
.cta {
  text-align: center;
}

.cta p {
  color: #aaa;
  margin: 20px 0;
}

.cta-btn {
  background: #c9a35b;
  border: none;
  padding: 15px 25px;
  border-radius: 10px;
  cursor: pointer;
}

/* FORM GRID */
form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 100px;
}

/* campos */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 14px;
  color: #ccc;
}

/* inputs */
input {
  padding: 2px;
  border-radius: 10px;
  border: 1px solid rgba(217,217,217,0.25);
  background: #1a1a1a;
  color: #fff;
  width: 100%;
}

#whatsapp::placeholder {
padding-left: 20px;
}

/* full width */
.field.full {
  grid-column: 1 / -1;
}

/* botão */
form button {
  grid-column: 1 / -1;
  background: #c9a35b;
  border: none;
  padding: 16px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
}

/* texto */
.form-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-top: 5px;
}

/* ========================= */
/* 📱 RESPONSIVIDADE */
/* ========================= */


/* tablets */
@media (max-width: 768px) {

  .form-wrapper {
    padding: 30px 15px;
  }

  h2 {
    font-size: 22px;
    margin: 40px 0;
  }

}

/* mobile */
@media (max-width: 480px) {

  h2 {
    font-size: 20px;
    margin: 30px 0;
  }

  .option {
    padding: 16px;
    font-size: 15px;
  }

  form {
    grid-template-columns: 1fr;
  }

  .progress-header span {
    font-size: 13px;
  }

}

/* mobile pequeno */
@media (max-width: 360px) {

  h2 {
    font-size: 18px;
  }

  .option {
    font-size: 14px;
    padding: 14px;
  }

  form button {
    font-size: 14px;
    padding: 14px;
  }

}

let currentStep = 1;
const totalSteps = 5;

const data = {};

const steps = document.querySelectorAll(".step");
const progress = document.getElementById("progress");
const stepText = document.getElementById("stepText");
const backBtn = document.getElementById("backBtn");

function updateUI() {
  steps.forEach(step => step.classList.remove("active"));
  document.querySelector(`[data-step="${currentStep}"]`).classList.add("active");

  progress.style.width = ((currentStep - 1) / (totalSteps - 1)) * 100 + "%";
  stepText.innerText = `Etapa ${currentStep} de ${totalSteps}`;

  if (currentStep === 1) {
    backBtn.classList.add("hidden");
  } else {
    backBtn.classList.remove("hidden");
  }
}

function nextStep() {
  if (currentStep < totalSteps) {
    currentStep++;
    updateUI();
  }
}

function prevStep() {
  if (currentStep > 1) {
    currentStep--;
    updateUI();
  }
}

backBtn.addEventListener("click", prevStep);

/* opções */
document.querySelectorAll(".option").forEach(btn => {
  btn.addEventListener("click", () => {

    const field = btn.dataset.field;
    const value = btn.dataset.value;

    data[field] = value;

    btn.parentElement.querySelectorAll(".option").forEach(b => b.classList.remove("active"));
    btn.classList.add("active");

    setTimeout(nextStep, 300);
  });
});

/* CTA */
document.getElementById("goForm").addEventListener("click", nextStep);

/* máscara whatsapp */
const whatsappInput = document.getElementById("whatsapp");

whatsappInput.addEventListener("input", function(e) {
  let value = e.target.value.replace(/\D/g, "");

  if (value.length > 11) value = value.slice(0, 11);

  value = value.replace(/^(\d{2})(\d)/g, "($1) $2");
  value = value.replace(/(\d{5})(\d)/, "$1-$2");

  e.target.value = value;
});

/* submit */
document.getElementById("finalForm").addEventListener("submit", (e) => {
  e.preventDefault();

  console.log("Dados completos:", data);

  alert("Form enviado!");
});