<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تم إنشاء حسابك! — Artal CRM</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; color: #1a1a2e; min-height: 100vh; }
    body { background: linear-gradient(135deg, #ecfdf5 0%, #eef2ff 100%); display: flex; align-items: center; justify-content: center; padding: 20px; }

    .container { max-width: 540px; width: 100%; }
    .card { background: white; border-radius: 24px; padding: 44px 36px; box-shadow: 0 20px 50px rgba(15, 26, 48, 0.1); text-align: center; }

    .success-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35); animation: bounce 0.6s ease; }
    .success-icon .material-symbols-rounded { font-size: 48px; color: white; font-weight: 700; }
    @keyframes bounce { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

    h1 { font-size: 30px; font-weight: 700; color: #0f1a30; margin-bottom: 12px; }
    .subtitle { color: #64748b; font-size: 16px; margin-bottom: 28px; }

    .url-box { background: linear-gradient(135deg, #f8fafc, #eef2ff); border: 2px solid #c7d2fe; border-radius: 14px; padding: 18px; margin-bottom: 28px; text-align: right; }
    .url-label { font-size: 13px; color: #64748b; margin-bottom: 6px; font-weight: 500; }
    .url-value { font-size: 18px; font-weight: 600; color: #1a3c6e; word-break: break-all; font-family: 'Inter', monospace; direction: ltr; text-align: left; }

    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; text-align: right; }
    @media (max-width: 480px) { .info-grid { grid-template-columns: 1fr; } }
    .info-item { background: #f8fafc; padding: 14px; border-radius: 10px; border: 1px solid #e2e8f0; }
    .info-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
    .info-value { font-size: 15px; font-weight: 600; color: #0f1a30; word-break: break-word; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 30px; background: linear-gradient(135deg, #4f6bed, #1a3c6e); color: white; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 8px 20px rgba(79,107,237,0.35); transition: all 0.2s; font-family: inherit; }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79,107,237,0.5); }

    .trial-info { margin-top: 24px; padding: 14px 18px; background: #fef9c3; color: #854d0e; border-radius: 10px; font-size: 14px; border: 1px solid #fde68a; display: flex; align-items: center; gap: 8px; justify-content: center; }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="success-icon">
        <span class="material-symbols-rounded">check</span>
      </div>

      <h1>🎉 تم إنشاء حسابك!</h1>
      <p class="subtitle">حسابك جاهز ويعمل الآن — كل شيء بانتظارك</p>

      <div class="url-box">
        <div class="url-label">رابط شركتك المخصَّص</div>
        <div class="url-value"><%= result.slug %>.<%= mainDomain %></div>
      </div>

      <div class="info-grid">
        <div class="info-item">
          <div class="info-label">الشركة</div>
          <div class="info-value"><%= result.companyName %></div>
        </div>
        <div class="info-item">
          <div class="info-label">البريد الإلكتروني</div>
          <div class="info-value" style="direction:ltr;text-align:left"><%= result.email %></div>
        </div>
      </div>

      <a href="<%= result.url %>" class="btn">
        ادخل إلى لوحة التحكم
        <span class="material-symbols-rounded">arrow_back</span>
      </a>

      <div class="trial-info">
        <span class="material-symbols-rounded">card_giftcard</span>
        فترتك التجريبية تنتهي في <strong><%= new Date(result.trialEnds).toLocaleDateString('ar-SA') %></strong>
      </div>
    </div>
  </div>
</body>
</html>
