<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-family: Arial, sans-serif; background: #f4f6fb; margin: 0; padding: 30px 0; }
    .wrap { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 12px;
            overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
    .header { background: linear-gradient(135deg, #4f8ef7, #7c3aed); padding: 28px 32px; text-align: center; }
    .header h1 { color: #fff; font-size: 22px; margin: 0 0 4px; }
    .header p  { color: rgba(255,255,255,0.75); font-size: 12px; margin: 0; }
    .badge { background: rgba(255,255,255,0.2); color: #fff; border-radius: 20px;
             padding: 4px 14px; font-size: 12px; font-weight: 600;
             display: inline-block; margin-top: 10px; }
    .body { padding: 32px; color: #374151; }
    .body p { font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
    .cred-box { background: #f0f4ff; border: 1px solid #c7d7fd; border-radius: 10px;
                padding: 18px 20px; margin: 18px 0; }
    .cred-box h4 { margin: 0 0 12px; font-size: 12px; color: #4f46e5;
                   text-transform: uppercase; letter-spacing: 0.5px; }
    .cred-row { display: flex; justify-content: space-between; align-items: center;
                padding: 7px 0; border-bottom: 1px solid #dde5ff; font-size: 13px; }
    .cred-row:last-child { border-bottom: none; }
    .cred-label { color: #6b7280; }
    .cred-value { font-weight: 700; color: #1e3a8a; font-family: monospace; font-size: 14px; }
    .plan-box { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
                padding: 14px 18px; margin-bottom: 18px; }
    .plan-box h4 { margin: 0 0 10px; font-size: 12px; color: #c2410c;
                   text-transform: uppercase; letter-spacing: 0.5px; }
    .plan-row { display: flex; justify-content: space-between; font-size: 13px;
                padding: 5px 0; border-bottom: 1px solid #fde8cc; color: #374151; }
    .plan-row:last-child { border-bottom: none; font-weight: 700; color: #92400e; font-size: 14px; }
    .steps { margin: 16px 0; }
    .step { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
    .step-num { background: #4f8ef7; color: #fff; border-radius: 50%;
                min-width: 22px; height: 22px; display: flex; align-items: center;
                justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
    .step-text { font-size: 13px; color: #374151; line-height: 1.5; }
    .warning { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
               padding: 10px 14px; font-size: 12px; color: #92400e; margin-top: 16px; }
    .footer { text-align: center; padding: 16px 32px 24px; font-size: 11px;
              color: #9ca3af; border-top: 1px solid #f3f4f6; }
  </style>
</head>
<body>
<div class="wrap">

  <div class="header">
    <h1>🎓 ECA</h1>
    <p>Education Consultancy Association</p>
    <div class="badge">🎉 Welcome, {{ $memberName }}!</div>
  </div>

  <div class="body">
    <p>Hi <b>{{ $memberName }}</b>,</p>
    <p>Your ECA membership account has been created. Here are your login credentials:</p>

    <div class="cred-box">
      <h4>🔑 Your Login Credentials</h4>
      <div class="cred-row">
        <span class="cred-label">Email</span>
        <span class="cred-value">{{ $email }}</span>
      </div>
      <div class="cred-row">
        <span class="cred-label">Password</span>
        <span class="cred-value">{{ $password }}</span>
      </div>
      <div class="cred-row">
        <span class="cred-label">Unit</span>
        <span class="cred-value" style="font-family:Arial;">{{ $unitName }}</span>
      </div>
    </div>

    <div class="plan-box">
      <h4>📋 Membership Plan</h4>
      <div class="plan-row">
        <span>Plan</span>
        <span>{{ $planName }}</span>
      </div>
      <div class="plan-row">
        <span>Type</span>
        <span>{{ $planType }}</span>
      </div>
      <div class="plan-row">
        <span>Amount</span>
        <span>₹{{ $planAmount }}</span>
      </div>
    </div>

    <p><b>Your current status is <span style="color:#f97316;">PENDING</span>. Next steps:</b></p>
    <div class="steps">
      <div class="step">
        <div class="step-num">1</div>
        <div class="step-text">Your unit admin will review and <b>approve</b> your application.</div>
      </div>
      <div class="step">
        <div class="step-num">2</div>
        <div class="step-text">Once approved, you'll receive another email asking you to <b>complete payment</b>.</div>
      </div>
      <div class="step">
        <div class="step-num">3</div>
        <div class="step-text">After payment, your membership becomes <b>ACTIVE</b> and your ID card is issued.</div>
      </div>
    </div>

    <div class="warning">
      ⚠️ Please <b>change your password</b> after your first login for security. Do not share these credentials with anyone.
    </div>
  </div>

  <div class="footer">
    &copy; {{ date('Y') }} ECA — Education Consultancy Association<br>
    This is an automated email. Please do not reply directly.
  </div>

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