<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <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;}
    .header p{color:rgba(255,255,255,0.75);font-size:12px;margin:4px 0 0;}
    .body{padding:32px;color:#374151;}
    .body p{font-size:14px;line-height:1.7;margin:0 0 16px;}
    .card{background:#f8faff;border:1px solid #e0e7ff;border-radius:10px;padding:20px;margin:20px 0;}
    .card-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e9ecef;font-size:13px;}
    .card-row:last-child{border-bottom:none;}
    .card-label{color:#6b7280;font-weight:500;}
    .card-value{color:#111827;font-weight:600;}
    .membership-id{text-align:center;background:linear-gradient(135deg,#4f8ef7,#7c3aed);color:#fff;padding:16px;border-radius:10px;margin:20px 0;}
    .membership-id .label{font-size:11px;opacity:0.8;text-transform:uppercase;letter-spacing:1px;}
    .membership-id .id{font-size:24px;font-weight:700;letter-spacing:2px;margin-top:4px;}
    .success-badge{background:#d1fae5;color:#065f46;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block;margin-bottom:16px;}
    .footer{text-align:center;padding:16px 32px 24px;font-size:11px;color:#9ca3af;}
  </style>
</head>
<body>
<div class="wrap">

  <div class="header">
    <h1>🎓 ECA</h1>
    <p>Education Consultancy Association</p>
  </div>

  <div class="body">
    <p>Hi <b>{{ $memberName }}</b>,</p>
    <div class="success-badge">✅ Membership Activated!</div>
    <p>Congratulations! Your ECA membership has been
       successfully activated. Welcome to the
       ECA family! 🎉</p>

    {{-- MEMBERSHIP ID CARD --}}
    <div class="membership-id">
      <div class="label">Your Membership ID</div>
      <div class="id">{{ $membershipId }}</div>
    </div>

    {{-- DETAILS --}}
    <div class="card">
      <div class="card-row">
        <span class="card-label">Plan</span>
        <span class="card-value">{{ $planName }}</span>
      </div>
      <div class="card-row">
        <span class="card-label">Membership Type</span>
        <span class="card-value">{{ $planType }}</span>
      </div>
      <div class="card-row">
        <span class="card-label">Amount Paid</span>
        <span class="card-value">₹{{ $amount }}</span>
      </div>
      <div class="card-row">
        <span class="card-label">Unit</span>
        <span class="card-value">{{ $unitName }}</span>
      </div>
      <div class="card-row">
        <span class="card-label">Joined Date</span>
        <span class="card-value">{{ $joinedDate }}</span>
      </div>
      <div class="card-row">
        <span class="card-label">Valid Until</span>
        <span class="card-value">
          {{ $expiryDate ?? 'Lifetime (Never Expires)' }}
        </span>
      </div>
    </div>

    <p style="font-size:13px;color:#6b7280;">
      You can now access all ECA member benefits including
      event registrations, news updates, and more.
    </p>
  </div>

  <div class="footer">
    &copy; {{ date('Y') }} ECA — Education Consultancy Association
  </div>
</div>
</body>
</html>