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

      <div id="bsfpForm">
        <h5 class="fw-bold mb-1 text-center">Forgot your password?</h5>
        <p class="text-muted small mb-3 text-center">Enter your email and we'll send you a reset link.</p>
        <label class="form-label small fw-semibold" for="bsfpEmail">Email address</label>
        <input type="email" class="form-control mb-2" id="bsfpEmail" placeholder="you@example.com">
        <div class="small text-danger mb-2 d-none" id="bsfpError">Please enter a valid email address.</div>
        <button class="btn btn-dark w-100 fw-bold mt-2" id="bsfpSubmit">Send reset link</button>
      </div>

      <div id="bsfpSuccess" class="d-none text-center">
        <div class="bsfp-check mb-3 mx-auto">&#10003;</div>
        <h5 class="fw-bold mb-1">Check your email</h5>
        <p class="text-muted small mb-3">We sent a reset link to<br><span class="fw-semibold" id="bsfpMasked"></span></p>
        <p class="small mb-0">
          Didn't get it?
          <a href="javascript:void(0)" id="bsfpResend">Resend link</a>
          <span id="bsfpTimer" class="text-muted"></span>
        </p>
      </div>

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

.bsfp-card { width: 380px; border: 1px solid #eceef1; border-radius: 14px; }
.bsfp-check { width: 52px; height: 52px; border-radius: 50%; background: #d1f5df; color: #1a7f4b; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#bsfpSuccess { animation: bsfpFadeIn .25s ease; }
@keyframes bsfpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

const RESEND_SECONDS = 30;

const formView = document.getElementById('bsfpForm');
const successView = document.getElementById('bsfpSuccess');
const emailInput = document.getElementById('bsfpEmail');
const errorMsg = document.getElementById('bsfpError');
const submitBtn = document.getElementById('bsfpSubmit');
const maskedLabel = document.getElementById('bsfpMasked');
const resendLink = document.getElementById('bsfpResend');
const timerLabel = document.getElementById('bsfpTimer');

let countdownId = null;

function isValidEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

// Masks everything but the first character of the local part, e.g.
// "sarah@gmail.com" becomes "s\u2022\u2022\u2022\u2022\u2022@gmail.com" so the
// success screen confirms the destination without fully exposing it.
function maskEmail(value) {
  const [local, domain] = value.split('@');
  if (!local || !domain) return value;
  const masked = local[0] + '\u2022'.repeat(Math.max(local.length - 1, 3));
  return masked + '@' + domain;
}

function startCountdown() {
  let remaining = RESEND_SECONDS;
  resendLink.classList.add('disabled', 'text-muted');
  resendLink.style.pointerEvents = 'none';
  timerLabel.textContent = ' (' + remaining + 's)';
  clearInterval(countdownId);
  countdownId = setInterval(() => {
    remaining -= 1;
    if (remaining <= 0) {
      clearInterval(countdownId);
      timerLabel.textContent = '';
      resendLink.classList.remove('disabled', 'text-muted');
      resendLink.style.pointerEvents = 'auto';
    } else {
      timerLabel.textContent = ' (' + remaining + 's)';
    }
  }, 1000);
}

submitBtn.addEventListener('click', () => {
  const value = emailInput.value.trim();
  const valid = isValidEmail(value);
  emailInput.classList.toggle('is-invalid', !valid);
  errorMsg.classList.toggle('d-none', valid);
  if (!valid) return;

  maskedLabel.textContent = maskEmail(value);
  formView.classList.add('d-none');
  successView.classList.remove('d-none');
  startCountdown();
});

resendLink.addEventListener('click', () => {
  if (resendLink.classList.contains('disabled')) return;
  startCountdown();
});