<?php use App\Helpers\Helper; ?>

<div class="text-center py-2">
  <div style="width:80px;height:80px;background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px">
    <i class="bi bi-envelope-check-fill text-success" style="font-size:2rem"></i>
  </div>

  <h4 class="fw-800 text-dark mb-2">Check Your Email!</h4>
  <p class="text-muted small mb-0">We sent a verification link to</p>
  <p class="fw-700 text-primary mb-4"><?= htmlspecialchars($email ?? '') ?></p>

  <div class="alert alert-info text-start py-3 mb-4" style="border-radius:12px;font-size:.875rem">
    <i class="bi bi-info-circle me-2"></i>
    Click the <strong>Verify My Email &amp; Sign In</strong> button in the email to activate your account and be signed in automatically.
  </div>

  <div class="bg-light rounded-3 p-3 mb-4 text-start" style="font-size:.82rem;color:#6b7280">
    <div class="fw-700 mb-2 text-dark small">What happens next:</div>
    <div class="d-flex align-items-start gap-2 mb-2">
      <span class="badge bg-primary rounded-pill">1</span>
      <span>Open the email from <strong><?= defined('APP_NAME') ? htmlspecialchars(APP_NAME) : 'Zabibu Residence' ?></strong></span>
    </div>
    <div class="d-flex align-items-start gap-2 mb-2">
      <span class="badge bg-primary rounded-pill">2</span>
      <span>Click <strong>"Verify My Email &amp; Sign In"</strong></span>
    </div>
    <div class="d-flex align-items-start gap-2">
      <span class="badge bg-primary rounded-pill">3</span>
      <span>You'll be signed in and can make a booking right away</span>
    </div>
  </div>

  <p class="text-muted" style="font-size:.8rem">
    Didn't receive the email? Check your <strong>spam/junk</strong> folder.<br>
    Still nothing? <a href="<?= APP_URL ?>/register" class="text-primary text-decoration-none fw-600">Try registering again</a>
  </p>

  <hr class="my-4">

  <a href="<?= APP_URL ?>/login" class="btn btn-outline-primary btn-sm px-4">
    <i class="bi bi-box-arrow-in-right me-1"></i>Already verified? Sign In
  </a>
</div>
