<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Reset — Helmyx</title>
<!--[if mso]><style>table{border-collapse:collapse;}td{padding:0;}</style><![endif]-->
<style>
  body { margin: 0; padding: 0; background-color: #F1F5F9; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
  .email-wrapper { background-color: #F1F5F9; padding: 48px 20px; }
  .email-container { max-width: 560px; margin: 0 auto; }
  .email-header { background: linear-gradient(135deg, #0C1826 0%, #0F4A87 100%); border-radius: 16px 16px 0 0; padding: 32px; text-align: center; }
  .email-logo { display: inline-flex; align-items: center; gap: 10px; }
  .logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0A3A6B, #12C2CE); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
  .logo-text { color: white; font-size: 1.2rem; font-weight: 800; }
  .email-body { background: white; padding: 40px 32px; }
  .email-footer { background: #F8FAFC; border-radius: 0 0 16px 16px; padding: 24px 32px; text-align: center; }
  .btn-primary { display: inline-block; background: linear-gradient(135deg, #0A3A6B, #12C2CE); color: white; text-decoration: none; padding: 14px 36px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; margin: 24px 0; }
  .divider { border: none; border-top: 1px solid #E2E8F0; margin: 24px 0; }
  .security-note { background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px; padding: 12px 16px; font-size: 0.8rem; color: #92400E; }
  h1 { font-size: 1.5rem; font-weight: 700; color: #0C1826; margin: 0 0 8px; }
  p { font-size: 0.9rem; color: #475569; line-height: 1.6; margin: 0 0 16px; }
  .url-box { word-break: break-all; font-size: 0.75rem; color: #94A3B8; padding: 10px 14px; background: #F8FAFC; border-radius: 6px; border: 1px solid #E2E8F0; }
</style>
</head>
<body>
<div class="email-wrapper">
  <div class="email-container">

    <!-- Header -->
    <div class="email-header">
      <div class="email-logo">
        <div class="logo-icon">
          <svg width="20" height="20" fill="white" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/></svg>
        </div>
        <span class="logo-text">Helmyx</span>
      </div>
    </div>

    <!-- Body -->
    <div class="email-body">
      <div style="text-align:center;margin-bottom:28px;">
        <div style="width:60px;height:60px;background:linear-gradient(135deg,#0A3A6B,#12C2CE);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;">
          <svg width="28" height="28" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        </div>
        <h1>Reset Your Password</h1>
        <p style="color:#64748B;">We received a request to reset the password for your account.</p>
      </div>

      <p>Hello <strong><?= htmlspecialchars($userName ?? 'there') ?></strong>,</p>

      <p>You recently requested to reset your password for your Helmyx account. Click the button below to reset it. This link will expire in <strong><?= htmlspecialchars($expiresIn ?? '1 hour') ?></strong>.</p>

      <div style="text-align:center;">
        <a href="<?= htmlspecialchars($resetUrl ?? '#') ?>" class="btn-primary">Reset My Password</a>
      </div>

      <hr class="divider">

      <div class="security-note">
        ⚠️ <strong>Security Notice:</strong> If you did not request a password reset, please ignore this email. Your account is safe and no changes have been made.
      </div>

      <p style="margin-top:20px;font-size:0.8rem;color:#94A3B8;">If the button above doesn't work, copy and paste this URL into your browser:</p>
      <div class="url-box"><?= htmlspecialchars($resetUrl ?? '#') ?></div>
    </div>

    <!-- Footer -->
    <div class="email-footer">
      <p style="font-size:0.78rem;color:#94A3B8;margin:0;">
        This email was sent by <strong style="color:#64748B;">Helmyx</strong>. You're receiving this because a password reset was requested for your account.
      </p>
      <p style="font-size:0.75rem;color:#CBD5E1;margin:8px 0 0;">&copy; <?= date('Y') ?> Helmyx. All rights reserved.</p>
    </div>

  </div>
</div>
</body>
</html>
