<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>You're Invited to Join {{companyName}}</title>
  </head>
  <body style="margin:0;padding:0;background-color:#f4f7f6;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:#333333;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f7f6;">
      <tr>
        <td align="center" style="padding:40px 16px;">

          <table width="560" cellpadding="0" cellspacing="0" border="0" style="max-width:560px;width:100%;background:#ffffff;border-radius:12px;overflow:hidden;border:1px solid #eef2f5;">

            <!-- HEADER -->
            <tr>
              <td align="center" style="background:linear-gradient(135deg,#152f78,#3b82f6);padding:32px 24px;">
                <p style="margin:0 0 6px 0;font-size:24px;font-weight:700;color:#ffffff;letter-spacing:0.5px;">{{companyName}}</p>
                <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.85);letter-spacing:0.3px;">CA &amp; Tax Firm Automation Platform</p>
              </td>
            </tr>

            <!-- BODY -->
            <tr>
              <td style="padding:36px 32px;">

                <p style="margin:0 0 16px 0;font-size:15px;line-height:1.7;color:#4b5563;">Hi <strong>{{name}}</strong>,</p>
                <p style="margin:0 0 16px 0;font-size:15px;line-height:1.7;color:#4b5563;">
                  You have been invited to join <strong>{{companyName}}</strong> as a team member.
                  Your account has been created and is ready to activate.
                </p>

                <!-- INFO CARD -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;margin:24px 0;">
                  <tr>
                    <td style="padding:16px 20px 0 20px;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">

                        <tr>
                          <td style="padding:8px 0;border-bottom:1px solid #eef2f5;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                              <tr>
                                <td width="40%" style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Name</td>
                                <td width="60%" style="font-size:13px;font-weight:600;color:#1e293b;text-align:right;">{{name}}</td>
                              </tr>
                            </table>
                          </td>
                        </tr>

                        <tr>
                          <td style="padding:8px 0;border-bottom:1px solid #eef2f5;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                              <tr>
                                <td width="40%" style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Email</td>
                                <td width="60%" style="font-size:13px;font-weight:600;color:#1e293b;text-align:right;">{{email}}</td>
                              </tr>
                            </table>
                          </td>
                        </tr>

                        <tr>
                          <td style="padding:8px 0;{{#if department}}border-bottom:1px solid #eef2f5;{{/if}}">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                              <tr>
                                <td width="40%" style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Role</td>
                                <td width="60%" style="text-align:right;">
                                  <span style="display:inline-block;background:#dbeafe;color:#1d4ed8;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;">{{role}}</span>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>

                        {{#if department}}
                        <tr>
                          <td style="padding:8px 0;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                              <tr>
                                <td width="40%" style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Department</td>
                                <td width="60%" style="font-size:13px;font-weight:600;color:#1e293b;text-align:right;">{{department}}</td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                        {{/if}}

                      </table>
                    </td>
                  </tr>
                  <tr><td style="padding:0 20px 16px 20px;"></td></tr>
                </table>

                <p style="margin:0 0 24px 0;font-size:15px;line-height:1.7;color:#4b5563;">
                  Click the button below to accept your invitation and set your password.
                  This link is valid for <strong>{{expiresInHours}} hours</strong>.
                </p>

                <!-- CTA -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 24px 0;">
                  <tr>
                    <td align="center">
                      <a href="{{inviteLink}}"
                        style="display:inline-block;background:linear-gradient(135deg,#152f78,#3b82f6);color:#ffffff;text-decoration:none;padding:14px 36px;border-radius:8px;font-size:15px;font-weight:600;letter-spacing:0.3px;">
                        Accept Invitation
                      </a>
                    </td>
                  </tr>
                </table>

                <!-- EXPIRY NOTE -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:24px;">
                  <tr>
                    <td style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:12px 16px;font-size:13px;color:#92400e;text-align:center;">
                      &#9203; This invitation link expires in <strong>{{expiresInHours}} hours</strong>.
                      After expiry, please contact your administrator for a new invite.
                    </td>
                  </tr>
                </table>

                <!-- DIVIDER -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 16px 0;">
                  <tr><td style="border-top:1px solid #eef2f5;font-size:0;">&nbsp;</td></tr>
                </table>

                <p style="margin:0;font-size:12px;color:#9ca3af;word-break:break-all;text-align:center;">
                  If the button doesn't work, copy and paste this link into your browser:<br />
                  <a href="{{inviteLink}}" style="color:#3b82f6;">{{inviteLink}}</a>
                </p>

              </td>
            </tr>

            <!-- FOOTER -->
            <tr>
              <td align="center" style="background:#f8fafc;padding:20px 32px;border-top:1px solid #eef2f5;">
                <p style="margin:0 0 4px 0;font-size:12px;color:#9ca3af;">
                  This invitation was sent by <strong style="color:#6b7280;">{{companyName}}</strong>.
                  If you were not expecting this, you can safely ignore this email.
                </p>
                <p style="margin:0;font-size:12px;color:#9ca3af;">&copy; {{currentYear}} {{companyName}}. All rights reserved.</p>
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
