<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organization Approved — Helmyx</title>
<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; }
  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; }
</style>
</head>
<body>
<div class="email-wrapper">
  <div class="email-container">
    <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>

    <div class="email-body">
      <div style="text-align:center;margin-bottom:28px;">
        <div style="width:60px;height:60px;background:linear-gradient(135deg,#0E9F6E,#62C1A1);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"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <h1>You're approved!</h1>
        <p style="color:#64748B;">Your organization is now active on Helmyx.</p>
      </div>

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

      <p><strong><?= htmlspecialchars($orgName ?? 'Your organization') ?></strong> has been reviewed and approved. You can now sign in and start setting up your projects, team, contractors and suppliers.</p>

      <div style="text-align:center;">
        <a href="<?= htmlspecialchars($loginUrl ?? '#') ?>" class="btn-primary">Sign In Now</a>
      </div>
    </div>

    <div class="email-footer">
      <p style="font-size:0.75rem;color:#CBD5E1;margin:0;">&copy; <?= date('Y') ?> Helmyx. All rights reserved.</p>
    </div>
  </div>
</div>
</body>
</html>
