<div class="container py-5 d-flex justify-content-center">
  <div class="card bssw-card">
    <div class="card-body p-4">

      <ul class="nav nav-pills nav-fill mb-4" id="bsswNav">
        <li class="nav-item"><span class="nav-link active" id="bsswNav1">1. Account</span></li>
        <li class="nav-item"><span class="nav-link" id="bsswNav2">2. Profile</span></li>
        <li class="nav-item"><span class="nav-link" id="bsswNav3">3. Review</span></li>
      </ul>
      <div class="progress mb-4" style="height:4px;">
        <div class="progress-bar" id="bsswProgress" style="width:33%"></div>
      </div>

      <div class="bssw-step" id="bsswStep1">
        <div class="mb-3">
          <label class="form-label">Email address</label>
          <input type="email" class="form-control" id="bsswEmail" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Password</label>
          <input type="password" class="form-control" id="bsswPassword" minlength="6" required>
        </div>
      </div>

      <div class="bssw-step d-none" id="bsswStep2">
        <div class="mb-3">
          <label class="form-label">Full name</label>
          <input type="text" class="form-control" id="bsswName" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Company</label>
          <input type="text" class="form-control" id="bsswCompany">
        </div>
      </div>

      <div class="bssw-step d-none" id="bsswStep3">
        <h6 class="fw-bold mb-3">Review your details</h6>
        <dl class="row small mb-0">
          <dt class="col-4">Email</dt><dd class="col-8" id="bsswReviewEmail"></dd>
          <dt class="col-4">Full name</dt><dd class="col-8" id="bsswReviewName"></dd>
          <dt class="col-4">Company</dt><dd class="col-8" id="bsswReviewCompany"></dd>
        </dl>
      </div>

      <div class="alert alert-success d-none" id="bsswSuccess">Account created successfully!</div>

      <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary" id="bsswBack" disabled>Back</button>
        <button type="button" class="btn btn-primary" id="bsswNext" disabled>Next</button>
        <button type="button" class="btn btn-success d-none" id="bsswSubmit">Submit</button>
      </div>

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

.bssw-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsswNav .nav-link { cursor: default; pointer-events: none; }

let currentStep = 1;
const totalSteps = 3;

const data = { email: '', password: '', name: '', company: '' };

const navs = [null, document.getElementById('bsswNav1'), document.getElementById('bsswNav2'), document.getElementById('bsswNav3')];
const steps = [null, document.getElementById('bsswStep1'), document.getElementById('bsswStep2'), document.getElementById('bsswStep3')];
const progress = document.getElementById('bsswProgress');
const backBtn = document.getElementById('bsswBack');
const nextBtn = document.getElementById('bsswNext');
const submitBtn = document.getElementById('bsswSubmit');
const success = document.getElementById('bsswSuccess');

const emailInput = document.getElementById('bsswEmail');
const passwordInput = document.getElementById('bsswPassword');
const nameInput = document.getElementById('bsswName');
const companyInput = document.getElementById('bsswCompany');

function isStepValid(step) {
  if (step === 1) return emailInput.value.includes('@') && passwordInput.value.length >= 6;
  if (step === 2) return nameInput.value.trim().length > 0;
  return true;
}

function refreshNextState() {
  nextBtn.disabled = !isStepValid(currentStep);
}

function showStep(step) {
  steps.forEach((el, i) => { if (el) el.classList.toggle('d-none', i !== step); });
  navs.forEach((el, i) => { if (el) el.classList.toggle('active', i === step); });
  progress.style.width = Math.round((step / totalSteps) * 100) + '%';
  backBtn.disabled = step === 1;

  if (step === totalSteps) {
    nextBtn.classList.add('d-none');
    submitBtn.classList.remove('d-none');
    document.getElementById('bsswReviewEmail').textContent = data.email;
    document.getElementById('bsswReviewName').textContent = data.name;
    document.getElementById('bsswReviewCompany').textContent = data.company || '—';
  } else {
    nextBtn.classList.remove('d-none');
    submitBtn.classList.add('d-none');
    refreshNextState();
  }
}

[emailInput, passwordInput, nameInput, companyInput].forEach(input => {
  input.addEventListener('input', refreshNextState);
});

nextBtn.addEventListener('click', () => {
  if (!isStepValid(currentStep)) return;

  // Persist entered values into the data object before moving on, so Back
  // never loses what the user already typed on an earlier step.
  data.email = emailInput.value;
  data.password = passwordInput.value;
  data.name = nameInput.value;
  data.company = companyInput.value;

  if (currentStep < totalSteps) {
    currentStep += 1;
    showStep(currentStep);
  }
});

backBtn.addEventListener('click', () => {
  if (currentStep > 1) {
    currentStep -= 1;
    showStep(currentStep);
  }
});

submitBtn.addEventListener('click', () => {
  success.classList.remove('d-none');
  submitBtn.disabled = true;
  backBtn.disabled = true;
});

showStep(1);
refreshNextState();