<table width="100%" bgcolor="#f1f5f9" cellpadding="0" cellspacing="0" border="0"
  style="padding: 6rem; color: #1e293b; font-family: Arial; text-align: center;">
  <tr>
    <td align="center">
      <table width="750" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"
        style="border-radius: 10px; overflow: hidden; padding: 3rem;">
        <tr>
          <td style="padding: 0.5rem 0;">
            <h1
              style="font-family: Arial, Helvetica, sans-serif; text-align: center; text-transform: uppercase; font-size: 28px; margin: 0;">
              Recupera tu cuenta
            </h1>
          </td>
        </tr>
        <tr>
          <td
            style="font-family: Arial, Helvetica, sans-serif; text-align: left; padding: 0.5rem 3rem; font-size: 16px;">
            <p style="margin: 1rem 0; color: #1e293b; text-align: center;">Recupera tu cuenta dando click en el
              siguiente enlace:</p>
            <div style="text-align: center; padding: 1rem 0;">
              <a href="<%= props?.recoveryLink %>"
                style="background: #a4c6f5; color: #1e293b; display: inline-block; padding: 1rem 3rem; font-size: 24px; font-weight: 700; border-radius: 4px; text-decoration: none;">
                Click aquí
              </a>
              <p style="margin: 0.5rem 0; color: #1e293b;"><small>Este link expira en 24 horas</small></p>
            </div>

            <p style="margin: 1rem 0; color: #1e293b;">Si no solicitaste este correo, por favor ignóralo.</p>
          </td>
        </tr>
      </table>
      <p style="font-size: 14px; text-align: center; margin: 1rem 0 0;">
        <span>&copy; Copyright <%= new Date().getFullYear() %> <a href="<%= props?.appUrl %>">
              <%= props?.appName %>
            </a></span>
      </p>

    </td>
  </tr>
</table>
